Как добавить элемент непосредственно в дочерний элемент пользовательского модуля в qml?

Question

Как добавить элемент прямо в потомок пользовательского модуля в qml? Ниже представлены три прямоугольника (rect1 / rect2 / rect3) в качестве содержимого ScrollView

import QtQuick 2.12
import QtQuick.Controls 2.12

ScrollView {
    property var content

    clip: true
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
    Rectangle {
        width:  parent.width
        height: c.height
        implicitHeight: c.height

        Column {
            id: c
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            // Contents

            Rectangle{
                id: rect1
                width: 100
                height: 200
                color: "#ffff00"
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Rectangle{
                id: rect2
                width: 100
                height: 200
                color: "#000000"
                anchors.horizontalCenter: parent.horizontalCenter
            }


            Rectangle{
                id: rect3
                width: 100
                height: 200
                color: "#00ffff"
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }

}

Но каждый раз, когда писать вышеупомянутое становится сложнее, я хочу инкапсулировать приведенный выше код в модуль MyScrollView.qml

Я хочу использовать его вот так

MyScrollView {
    Rectangle {
        id: rect1
        width: 100
        height: 200
        color: "#ffff00"
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Rectangle {
        id: rect2
        width: 100
        height: 200
        color: "#000000"
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Rectangle {
        id: rect3
        width: 100
        height: 200
        color: "#00ffff"
        anchors.horizontalCenter: parent.horizontalCenter
   }
}

Возможно ли это для qml? Если нет, то как написать максимально элегантно?

Answer 1

Вы можете добиться этого, используя разные подходы, например, есть Qt.createComponent для динамического c создания объектов на лету

или вы можете назначить свойство alias для ссылки на некоторый внутренний центральный объект для назначения Items

Или вы можете использовать Loader для загрузки компонентов.

Я покажу пример на основе ваших пожеланий в topi c:)

создать MyScrollView.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

ScrollView {
    property list<Item> content_list

    clip: true
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn

    Component.onCompleted:
    {
        for(var i = 0; i < content_list.length; i++)
        {
            content_list[i].parent = c;
        }
    }

    Rectangle
    {
        width:  parent.width
        height: c.height
        implicitHeight: c.height

        Column
        {
            id: c
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

И где-то использовать его так:

MyScrollView{content_list: [
                Rectangle {
                        id: rect1
                        width: 100
                        height: 200
                        color: "#ffff00"
                        anchors.horizontalCenter: parent.horizontalCenter
                    },

                    Rectangle {
                        id: rect2
                        width: 100
                        height: 200
                        color: "#000000"
                        anchors.horizontalCenter: parent.horizontalCenter
                    },

                    Rectangle {
                        id: rect3
                        width: 100
                        height: 200
                        color: "#00ffff"
                        anchors.horizontalCenter: parent.horizontalCenter
                   }
            ]}