QML:将 Rectangle 动态添加到组件实例的子级

Question

我有一个要动态添加内容的组件:

MyThing.qml: 

Item{
    Rectangle {
        id: r1
    }
}

main.qml

MyThing {
    id: c1
}

在 main.qml 的下一行代码中，我如何将子矩形动态添加到 c1 中的 r1？

Answer 1

首先，你要暴露r1作为 MyThing.qml 中根对象的属性，以便它在该范围之外可见。您可以使用 alias 来做到这一点。 :
MyThing.qml :

import QtQuick 2.0

Item {
    property alias rect: r1

    Rectangle {
        id: r1
        anchors.fill: parent
    }
}

然后，您可以使用 Qt.createQmlObject() 创建子矩形，例如:
main.qml :

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    width: 600
    height: 400
    visible: true

    MyThing {
        id: c1
        anchors.fill: parent
        Component.onCompleted: {
            Qt.createQmlObject("
                import QtQuick 2.0

                Rectangle {
                    color: \"salmon\"
                    anchors.fill: parent
                    anchors.margins: 10
                }
            ", rect)
        }
    }
}

如果子矩形组件存在于单独的文件中，请使用 Qt.createComponent() .

对于更结构化的方法，您需要使用某种 View ，例如 ListView .该 View 将负责创建子矩形，您只需控制应该创建多少个(通过 model 属性等)。