QML Grid Layout dynamically create object

haris123

I need to add some custom qml UI to GridLayout from java script.

Button{
       text: "Add"
       onClicked: {
           createObject();
       }
    }

  GridLayout{
        id: splitView
        anchors.top:bt.bottom
        width: parent.width
        height:parent.height
        columns: 2
        rows:2

    }

function createObject(){

        var color = "red"
        if(splitView.children.length===0){
           color = "yellow"
        }
        if(splitView.children.length===1){
           color="blue";
        }

           var component = Qt.createComponent("Control.qml");
           var object = component.createObject(splitView)
           object._width=300;
           object._height=200;
           object._color=color;
       }

Where,

Control.qml

Item {
    property int _width;
    property int _height;
    property color _color;

    Rectangle{
        width:300
        height:300
        color:_color
    }

}

The component is creating but, each component is add over the zeroth row and column, it's not displaying on 0,1 or 1,0 or 1,1 position on each time Add button click.

J ATP

This work for you?

Item
{
    Button{
        text: "Add"
        onClicked: {
            createObject();
        }
    }
    GridLayout{
        id: splitView

        width: parent.width
        height:parent.height
        columns: 2
        rows:2
    }

    function createObject(){

        var color = "red"
        if(splitView.children.length===0){
            color = "yellow"
        }
        if(splitView.children.length===1){
            color="blue";
        }


        var object = Qt.createQmlObject("import QtQuick 2.2; Rectangle{
        width:300
        height:300
        color:\""+color+"\"}", splitView);
    }
}

haris123

Thanks for the feedback, but how can I create object from different qml and add to gridLayout dynamically.

? Offline

@haris123 said in QML Grid Layout dynamically create object:

how can I create object from different qml

Like this:

component = Qt.createComponent("Sprite.qml");
sprite = component.createObject(appWindow, {"x": 100, "y": 100});

See Dynamic QML Object Creation from JavaScript.

haris123

This also work, but the problem is the content doesn't resize automatically if I resize the Window. That's the ultimate purpose for using the GridLayout.

J ATP

I think that is probably because you are using a fixed width and height on your items. Take a look at this http://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html

haris123

I solved the problem by by giving Layout.fillWidth property true on each time the object created. Also removed the fixed width and size.

        object.Layout.fillWidth =true
        object.Layout.fillHeight =true