QML Grid Layout dynamically create object



  • 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.



  • 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);
        }
    }
    


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


  • Moderators

    @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.



  • 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.



  • 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



  • 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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.