Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.
    Untitled.png

    However, the contents of the second widget is placed on top of the first widget.
    Screenshot from 2021-03-03 20-28-44.png

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

  • Moderators

    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
    }
    


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


  • Moderators

    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)


  • @sierdzio Thanks!


Log in to reply