Flickable + 属性别名内容

Question

我注意到继承Flickable.

我有两个文件，Comp.qml和main.qml. 这个想法是一个Comp对象的任何子级都将是Flickableunder 的子级Comp。我已经默认使用内容

default property alias contents: flickable.children

但结果却很奇怪。

Comp.qml

Rectangle {
    id: comp;
    anchors.fill: parent

    default property alias contents: flickable.children;  // alias a default property
    property int contentHeight: comp.height;

    Flickable {
        id: flickable;
        anchors.fill: parent;
        contentHeight: comp.contentHeight;
    }
}

主文件

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Comp {
        contentHeight: 800;


        Rectangle {         //  <-- this rectangle should be a child of Flickable
            width: 800;
            height: 800;
            border.color: "black";
            border.width: 5;
            Component.onCompleted: console.debug(parent)
        }
    }
}

可轻弹不起作用。

如果我尝试将其全部放在一个文件中，它会按预期工作：

主文件

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Rectangle {
        id: comp;
        anchors.fill: parent

        Flickable {
            id: flickable;
            anchors.fill: parent;
            contentHeight: 800;

            Rectangle {   //   <-- the child component
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }
        }
    }
}

我错过了什么吗？如何将外部组件添加到Flickable.

Answer 1

如文档中所述：

声明为 Flickable 子项的项会自动成为 Flickable 的contentItem 的父项。动态创建的项目需要明确地作为 contentItem 的父级

这不是这里的第一个案例，即它自己成为Rectangle了父母Flickable并且没有暴露预期的行为。children在这种情况下，添加到 可能不会触发正确的育儿方式。作为快速修复，您可以在将项目添加到Comp类型后立即重新设置其父项。

要处理Item内部的多个s，Comp只需使用一个唯一的孩子 (a la ScrollView)。在这里，我修改了示例以处理两个Rectangles（出于美观目的，只是添加clip到Comp）。

在主要：

Rectangle {
    id: root;
    width: 400;
    height: 400;

    Comp {
        contentHeight: col.height;

        Column {
            id: col
            spacing: 20
            Rectangle {
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }

            Rectangle {
                width: 800;
                height: 800;
                border.color: "black";
                border.width: 5;
            }
        }

        Component.onCompleted: console.debug(col.parent) // <-- not flickable
    }
}

在Comp.qml文件中：

Rectangle {
    id: comp;
    anchors.fill: parent
    default property alias contents: flickable.children;
    property int contentHeight: comp.height;

    Flickable {
        z:1
        clip: true       // just my taste!
        id: flickable;
        anchors.fill: parent;
        contentHeight: comp.contentHeight;
    }

    onContentsChanged: {                             // re-parenting
        if(flickable.children[1] !== undefined)
            flickable.children[1].parent = flickable.contentItem
    }
}