[Solved]RowLayout doesn't support dynamic item insertion?
-
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.0Rectangle {
height: 640
width: 2*640 + 40RowLayout { 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.0Rectangle {
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"}); }
}@
-
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.
-
Thank Jens
RowLayout works fine after I set implicitWidth and implicitHeight
@ Component {
id: rect
Rectangle {
implicitWidth: parent.height
implicitHeight: parent.height
}
}@