Dynamic object creation on RowLayout

logari84

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!

Jkimmy

You cannot specify the width of an item inside RowLayout because Layouts control their children's sizes. You have to use implicitHeight or implicitWidth 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 respects width and height

logari84

@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! :)