QML: Injecting Item into hierarchy of Items

Question

I have a reusable item which looks like this:

Reusable.qml:

Flickable {
    CustomCppComponent {
        id: customComponent
    }
}

Now I'd like to instantiate it with some extra child:

Main.qml:

Item {
    Reusable {
        Rectangle {
            id: rect
            anchors.fill: parent
        }
    }
}

But I want Rectangle to be placed as a child of CustomComponent so the equivalent would be:

Main.qml:

Item {
    Flickable {
        CustomCppComponent {
            id: customComponent
            Rectangle {
                id: rect
                anchors.fill: parent
            }
        }
    }
}

How do I do that?

JarMan JarMan · Accepted Answer · 2020-11-18T15:48:09

The easiest way is to use a default property.

Reusable.qml:

Flickable {
    default property alias innerContents: customComponent.data
    CustomCppComponent {
        id: customComponent
    }
}

Since innerContents is the default property, any child objects that you add to your Reusable instance will get added to innerContents, which is pointing at customComponent's data property.

This assumes that CustomCppComponent is a visual item of course, which your question did not define.

QML: Injecting Item into hierarchy of Items

1 Answers