Important: Please read the Qt Code of Conduct -

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")
            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 or implicitWidth or the attached properties. See for more information. Alternatively, you can use Row instead of RowLayout since that respects width and height

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

Log in to reply