QML: dynamically add Rectangle to a child of a component instance

Question

I have an Component that I want to add content to dynamically:

MyThing.qml: 

Item{
    Rectangle {
        id: r1
    }
}

main.qml

MyThing {
    id: c1
}

In the next line of code in main.qml how would I dynamically add a child rectangle to r1 in c1?

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().

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