Solved Dynamic object creation on RowLayout
-
Dear all,
I'm having an issue when I try to dynamically create items in a RowLayout.
For sake of simplicity I am populating my RowLayout item with colored Rectangles, which is defined in a QML file and I add it to my RowLayout item using Qt.createComponent(). However I am facing a strange behavior when I try to make the Rectangles random sized. In that case, the new imported items are all placed in the same position of RowLayout (0,0). If the Rectangle is fix sized, everything works great. I am providing the corresponding code and display output.
Bellow is the code for the RowLayout object
import QtQuick 2.12 import QtQuick.Layouts 1.12 Item { id: rowLayoutCont width: parent.width height: rowLayout.height RowLayout { id: rowLayout } MouseArea { id: rowMouseArea anchors.right: parent.right anchors.left: rowLayout.right height: parent.height onPressAndHold: { var component = Qt.createComponent("TestItem.qml") component.createObject(rowLayout) } onClicked: { console.log("RowLayout height: " + rowLayout.height + " implicitHeigt: " + rowLayout.implicitHeight) console.log("RowLayout width: " + rowLayout.width + " implicitWidth: " + rowLayout.implicitWidth) for(var i=0; i<rowLayout.children.length; i++) { console.log("item " + i + " at " + rowLayout.children[i].x + ", " + rowLayout.children[i].y) } } } }
The code for the TestItem.qml
import QtQuick 2.12 import QtQuick.Layouts 1.12 Rectangle { id: childRect // Random size for width and height // width: Math.random()*100 + 50 // height: Math.random()*100 + 50 // Constant size of 50x50 width: 50 height: 50 color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1) }
If I use:
width: 50 height: 50
I get the desired result. On the console log is shown the Size of the RowLayout and the position of the items.
However if I use
width: Math.random()*100 + 50 height: Math.random()*100 + 50
I get the strange behavior I mentioned in the beginning of the document. RowLayout has a size of zero and the items are all positioned at (0,0)
I am struggling but can't find what the cause might be. The only difference is the randomness of the width and size. Has anyone faced something similar? Any hint will be highly appreciated.
Thank you in advance!
-
You cannot specify the width of an item inside RowLayout because Layouts control their children's sizes. You have to use
implicitHeight
orimplicitWidth
or the attached properties. See https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html for more information. Alternatively, you can use Row instead of RowLayout since that respectswidth
andheight
-
@Jkimmy
Thank you very much for your response. Seems I have misunderstood the way Layout works. I replaced width and height with implicitWidth and implicitHeight respectively and it worked like a charm! :)