Is it possible to put a QML widget in a child of an imported QML file?

Question

Say I have the following code in a file called NestedCircle.qml:

import QtQuick 2.12

Rectangle {
    color: "blue"
    radius: Math.min(width, height)
    property Rectangle innerCircle: Rectangle {
        radius: Math.min(width, height)
        x: 10
        y: 10
        width: parent.width - 20
        height: parent.height - 20
        color: "yellow"
    }
}

Then in main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    title: "Three circles"
    NestedCircle {
        // the line below fails with a syntax error, Expected token `:'
        property NestedCircle innerCircle.innerCircle: NestedCircle {
            color: "red"
        }
    }
}

So assuming I need to use NestedCircle.qml and can't edit it (this is a minimal example, not the real application), is there a way to put something inside innerCircle wihtout re-making it?

Answer 1

No need for dynamic object creation here, you can do that purely declaratively. In fact here are 4 ways of doing it, dependings on your needs and the API you want:

// NestedCircle.qml
import QtQuick 2.12

Rectangle {
    color: "blue"
    radius: Math.min(width, height)
    default property alias innerCircleData: innerCircle.data
    property alias innerCircle: innerCircle
    Rectangle {
        id: innerCircle
        radius: Math.min(width, height)
        anchors.centerIn: parent
        width: parent.width - 20
        height: parent.height - 20
        color: "yellow"
    }
}

// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 800
    height: 640
    title: "Three circles"

    Row {
        anchors.centerIn: parent
        spacing: 30
        NestedCircle { // setting parent in the nested circle
            id: rootCircle
            width: 100
            height: 100
            NestedCircle {
                parent: rootCircle.innerCircle
                width: 50
                height: 50
                anchors.centerIn: parent
            }
        }
        NestedCircle { // assigning to the inner circle's children in the outer circle
            width: 100
            height: 100
            innerCircle.children: NestedCircle {
                width: 50
                height: 50
                anchors.centerIn: parent
            }
        }
        NestedCircle { // using an alias to the innerCircle.data
            width: 100
            height: 100
            innerCircleData: NestedCircle {
                width: 50
                height: 50
                anchors.centerIn: parent
            }
        }
        NestedCircle { // using an alias to the innerCircle.data as a default property
            width: 100
            height: 100
            NestedCircle {
                width: 50
                height: 50
                anchors.centerIn: parent
            }
        }
    }
}

Answer 2

If you want to add an item that is inside another, a possible solution is for the first item to be a child of the second. NestedCircle.qml

import QtQuick 2.12

Rectangle {
    color: "blue"
    radius: Math.min(width, height)
    property Rectangle innerCircle: inner

    Rectangle {
        id: inner
        radius: Math.min(width, height)
        x: 10
        y: 10
        width: parent.width - 20
        height: parent.height - 20
        color: "yellow"
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    title: "Three circles"
    Component{
        id: provider
        NestedCircle{

        }
    }
    NestedCircle {
        width: 100
        height: 100
        Component.onCompleted: {
            var obj = provider.createObject(innerCircle, {width: 50, height: 50})
            obj.anchors.centerIn = innerCircle
        }
    }
}