qt - 用于没有包装项目的多个项目的 QML Repeater

Question

我想制作一个看起来像这样的 View (为简洁起见，我省略了一个专栏)

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

并且一直在尝试使用 GridLayout 来实现这一点。问题是我可能有很多行。这仅取决于我的模型。所以，我希望能够有一个重复相同的 n 个元素的中继器。但是，它似乎只需要一个组件。我很想重复一个元素，但这不是 GridLayout 计算间距的方式。所以，这似乎是不可能的，除非使用动态对象创建。

我尝试重复的实际项目的代码是这样的

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

那么，有什么方法可以在 qml 中轻松地做到这一点，或者当涉及到这种 super 特定的表格格式时，我有点靠自己。

Answer 1

您可以使用 GridLayout 做到这一点；使用多个中继器，一个用于网格布局中的每一列。以下代码段再现了您的文本布局:

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