[Solved]RowLayout doesn't support dynamic item insertion?

Vincent007

RowLayout does not support dynamic item insertion?
I expect two rectangles can been seen inside RowLayout. RowLayout works fine when two rectangles are created statically. However, RowLayout doesn't work properly when two rectangles are created dynamically. Two rectangles are overlapped.

static approach
@import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Rectangle {
height: 640
width: 2*640 + 40

RowLayout {
    id: rowLayout
    anchors.fill: parent
    spacing: 10
    Rectangle {
        height: parent.height
        width: parent.height
        color: "red"
    }

    Rectangle {
        height: parent.height
        width: parent.height
        color: "blue"
    }
}

}@

dynamic approach
@import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Rectangle {
height: 640
width: 2*640 + 40
Component {
id: rect
Rectangle {
height: parent.height
width: parent.height
}
}

RowLayout {
    id: rowLayout
    anchors.fill: parent
    spacing: 10
}

Component.onCompleted: {
    rect.createObject(rowLayout,{"color":"red"});
    rect.createObject(rowLayout,{"color":"blue"});
}

}@

Jens

The real issue here is actually that you don't provide an implicit size for the rectangles. The problem with assigning width in a layout is that that information is useless when you start resizing it. Keep in mind that layouts by definition change the size of your item.

To make this work, simply change your rectangles to set implicitWidth and implicitHeight instead as that information is retained even after your layout is resized.

Vincent007

Thank Jens

RowLayout works fine after I set implicitWidth and implicitHeight

@ Component {
id: rect
Rectangle {
implicitWidth: parent.height
implicitHeight: parent.height
}
}@