Nested Repeaters with Loader
-
This is a simplified version of my problem. I'm loading items through a loader and placing them inside a Repeater. Some of the items in turn, consists of repeated elements. The first QML, SimpleWidget.qml creates a rectangle. Widget.qml in turn contains a Repeater that creates a rectangle for each model element.
I would like the items to be placed in a row next to each other.
However, the contents of the second widget is placed on top of the first widget.
main.qml
import QtQuick 2.12 import QtQuick.Window 2.12 Window { id: root visible: true width: 640 height: 480 color: "darkgray" Row { spacing: 10 Repeater { model: widgetsModel delegate: Loader { source: _source } } } ListModel { id: widgetsModel ListElement { _source: "SimpleWidget.qml" } ListElement { _source: "Widget.qml" } } }
SimpleWidget.qml
import QtQuick 2.0 Rectangle { width: 100 height: 60 color: "green" border.color: "black" }
Widget.qml
import QtQuick 2.0 Rectangle { Row { spacing: 5 Repeater { model: itemsModel delegate: Rectangle { width: _width height: 50 color: _color border.color: "black" } } } ListModel { id: itemsModel ListElement { _color: "brown" _width: 67 } ListElement { _color: "yellow" _width: 80 } } }
-
In
Widget.qml
the top-levelRectangle
has no dimensions (width and height are0
). That's why your items are overlapping -Repeater
thinks an item has no size while it does.Btw. you can also simplify the code in main.qml like this:
model: [ "SimpleWidget.qml", "Widget.qml" ] delegate: Loader { source: modelData }
-
@sierdzio Thanks, that solved it. Ideally, I would like the size of the Rectangle in Widget.qml to be based on the size of the repeated subcomponents and I assumed that is what would happen.
OK, so I added an id property to the row and added the following to the rectangle:
height: widgetsRow.height width: widgetsRow.width
So simple, thanks!
-
You have 2 options:
- use
Row
as your top level component (removeRectangle
) - set
Rectangle
dimensions to matchRow
dimensions (setwidth
andheight
to the same value asRow
)
- use