QML Repeater for multiple items without a wrapping Item

Question

I want to make a view that looks something like (I left off a column for brevity)

 __________
| text     |
|__________|
|    |headr|
|____|_____|
|text|item1|
|    |item2|
|    |     |
|text|item3|
|    |item4|
|    |item5|
|    |item6|
|____|_____|

and have been trying to do this with a GridLayout. The problem is that I could have potentially many rows. It just depends on my model. So, I want to be able to have a repeater that will repeat the same n elements. However, it seems to only take one component. I would love to repeat one element but that is not how the GridLayout figures out spacing. So, it seems as if this is impossible except using dynamic object creation.

My code for the actual item trying to be repeated is this

            Text {
                Layout.alignment: Qt.AlignHCenter
                text: abbr
                color: "#545454"
            }
            VerticalRule {
                Layout.fillHeight: true
            }
            ColumnLayout {
                Repeater {
                    model: getModel()
                    Image {}
                }
            }
            VerticalRule {
                Layout.fillHeight: true
            }
            ColumnLayout {
                Repeater {
                    model: getModel()
                    Image {}
                }
            }

So, is there any way to do this easily in qml or am I kind of on my own when it comes to this kind of super specific table ish format.

I have never heard of a "wrapping Item" solution to this problem. Why is it undesirable? I posted a solution that technically is a [wrapping Item solution][1]; is it the type of solution the OP wanted to avoid? [1]: stackoverflow.com/questions/69304778/… — pixelgrease

pixelgrease pixelgrease · Accepted Answer · 2015-06-20T04:06:42

You can do it with the GridLayout; use multiple Repeaters, one for each column in the Gridlayout. The following snippet reproduces your text layout:

GridLayout {
    columns: 2

    Text {
        Layout.columnSpan: 2
        Layout.alignment: Qt.AlignLeft
        text: 'text'
    }
    Rectangle {
        height: 2
        color: "black"
        Layout.row: 1
        Layout.columnSpan: 2
        Layout.fillWidth: true
    }
    Text {
        Layout.column: 1
        Layout.row: 2
        text: 'header'
    }
    Rectangle {
        height: 2
        color: "black"
        Layout.row: 3
        Layout.columnSpan: 2
        Layout.fillWidth: true
    }
    Repeater {
        model: list

        Text {
            Layout.column: 0
            Layout.row: index + 4
            Layout.alignment: Qt.AlignTop
            text: label
        }
    }
    Repeater {
        model: list

        Column {
            Layout.column: 1
            Layout.row: index + 4

            Repeater {
                model: items

                Text { text: item }
            }
        }
    }
    ListModel {
        id: list

        ListElement {
            label: 'text1'
            items: [
                ListElement { item: 'item1' },
                ListElement { item: 'item2' }
            ]
        }
        ListElement {
            label: 'text2'
            items: [
                ListElement { item: 'item3' },
                ListElement { item: 'item4' },
                ListElement { item: 'item5' },
                ListElement { item: 'item6' },
                ListElement { item: 'item7' }
            ]
        }
        ListElement {
            label: 'text3'
            items: [
                ListElement { item: 'item8' },
                ListElement { item: 'item9' }
            ]
        }
    }
}

QML Repeater for multiple items without a wrapping Item

2 Answers