Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Grid Layout dynamically create object

QML Grid Layout dynamically create object

Scheduled Pinned Locked Moved Solved QML and Qt Quick
7 Posts 3 Posters 8.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    haris123
    wrote on 28 Mar 2017, 15:17 last edited by haris123
    #1

    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.

    1 Reply Last reply
    0
    • J Offline
      J Offline
      J ATP
      wrote on 28 Mar 2017, 15:34 last edited by
      #2

      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);
          }
      }
      
      1 Reply Last reply
      1
      • H Offline
        H Offline
        haris123
        wrote on 28 Mar 2017, 15:52 last edited by
        #3

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

        ? 1 Reply Last reply 28 Mar 2017, 16:21
        0
        • H haris123
          28 Mar 2017, 15:52

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

          ? Offline
          ? Offline
          A Former User
          wrote on 28 Mar 2017, 16:21 last edited by
          #4

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

          1 Reply Last reply
          1
          • H Offline
            H Offline
            haris123
            wrote on 29 Mar 2017, 05:16 last edited by
            #5

            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.

            1 Reply Last reply
            0
            • J Offline
              J Offline
              J ATP
              wrote on 29 Mar 2017, 07:07 last edited by
              #6

              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

              1 Reply Last reply
              1
              • H Offline
                H Offline
                haris123
                wrote on 29 Mar 2017, 08:00 last edited by haris123
                #7

                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
                
                1 Reply Last reply
                0

                1/7

                28 Mar 2017, 15:17

                • Login

                • Login or register to search.
                1 out of 7
                • First post
                  1/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved