Flickable + 属性别名内容

Question

我注意到继承 Flickable 的一种奇怪行为。

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

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;
    }
}

ma​​in.qml

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)
        }
    }
}

flickable 不起作用。

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

ma​​in.qml

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

如docs中所述：

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

这不是这里的第一种情况，即Rectangle 本身是Flickable 的父级，并且不会暴露预期的行为。在这种情况下，添加到children 可能不会触发正确的育儿。作为快速修复，您可以在将项目添加到 Comp 类型后立即重新设置它的父项。

要在您的Comp 中处理多个Item，只需使用一个唯一的孩子（例如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
    }
}