How do you assign a QML Item to a component property in QML and then use that object inside the component?

Question

I'm trying to create a QML object that acts like a wrapper for other objects. Here's my QML file (Container.qml):

Item {
    property string label
    property Item control

    Row {
        Label {
            text: label
        }

        // Not sure how to display the control assigned to the control property
    }
}

What I would like to do (in my QML that consumes this component) is something like this:

Container {
    label: "My Label"
    control: Textbox {
        text: "My Value"
    }
}

When fed that QML the result (in the interface) should be something resembling the output from this QML:

Item {
    Row {
        Label {
            text: "My Label"
        }
        Textbox {
            text: "My Value"
        }
    }
}

Is this possible? When I try to do this I get "cannot assign object to property" when assigning an Item to the control property. I've searched the Qt forums and Googled this mercilessly, but no success. If anybody knows the answer it would be greatly appreciated.

Thanks

Jack

Solution 1

You can dynamically load items using the Loader element, and then set the 'control' property to be an alias that directly refers to the loader's sourceComponent property.

So your Container.qml could look like this:

Item {
    property string label
    property alias control : loader.sourceComponent

    width: 200; height: 200

    Row {
        Label { text: label }
        Loader { id: loader }
    }
}

Now when you assign a graphical item to the 'control' property, it will automatically be displayed by the Loader.

Solution 2

There is much better solution:

/* MyObject.qml */

Rectangle {
    default property alias data /* name can be any */ : inner_space.data

    /* ... You can put other elements here ... */
    Item {
       id: inner_space

       /* ... Params ... */
    }
    /* ... You can put other elements here ... */
}

And now we can do all we want!

/* main.qml */

Rectangle {
    MyObject {
        Button {
             /* ... */
        }
    }
}

Thanks to user bobbaluba for suggesting to use the data property rather than children.

Solution 3

You can create a container for other items using a custom property:

Item
{
    id: root

    property list<Item> rectList: [
        Rectangle
        {
            parent: root
        },
        Rectangle
        {
            parent: root
        },
        Rectangle
        {
            parent: root
        },
        Rectangle
        {
            parent: root
        }
    ]
}

Note that the parent of the Rectangle Items is set manually so they will be visual children of the container.

You can assess them as a javascript array

for ( var i = 0; i < root.rectList.length; i++ )
{
   var rect = root.rectList[i];
   rect.visible = true;
}

or

rect.rectList[1].visible = false;

Solution 4

Been using QML for about a month now, no idea really how to do this I'm afraid.

Best plan is to figure out all possible things that the control (Textbox in your example) could be, create an instance of each component in your row, and set a corresponding state on your Item. The state would then take care of making the desired component visible or invisible as appropriate.

Edit

Just thought. (Haven't tried this but give it a go!) In your Item's Component.onCompleted: handler, try calling control.createObject(rowID) where rowID is an id for your Row object, (which you want to be the parent of control).

View more solutions