4

我注意到继承的奇怪行为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;
    }
}

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

轻弹不起作用。

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

main.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?

4

1 回答 1

5

如文档中所述：

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

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

要在您的内部处理多个Items，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
    }
}
于 2014-12-10T02:53:34.650 回答