Nested Repeaters with Loader

[Kobus]

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
        }
    }
}

[sierdzio]

In Widget.qml the top-level Rectangle has no dimensions (width and height are 0). 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
}

[Kobus]

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

[sierdzio]

You have 2 options:

• use Row as your top level component (remove Rectangle)
• set Rectangle dimensions to match Row dimensions (set width and height to the same value as Row)

[Kobus]

@sierdzio Thanks!