Question

我注意到遗传Flickable的奇怪行为。

我有两个文件，Comp.qml和main.qml。我们的想法是Comp个对象的所有子项都是Flickable下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)
        }
    }
}

flickable不起作用。

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

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？

Answer 1

如docs中所述：

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

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

要处理Item内的多个Comp，只需使用一个独特的孩子（la ScrollView）。在这里，我修改了示例以处理两个Rectangle s（仅为了审美目的而添加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
    }
}

Flickable +属性别名内容

1 个答案: