qt - 使用中继器填​​充 GridLayout

Question

我尝试将单元格添加到我的 GridLayout通过使用 Repeater .我的数据存储在一个模型中，每个元素包含两个属性:

Title

Value

我的目标是获得一个 GridLayout包含 Title在第一个单元格和 Value 中在每行的第二个单元格中。

GridLayout {
    id: someId
    columns: 2
    rowSpacing: 5
    columnSpacing: 5
    anchors.margins: 5
    anchors.left: parent.left
    anchors.right: parent.right

    Repeater {
        model: myModel
        Label {
            text: modelData.title
        }
        TextArea {
            text: modelData.value
        }
    }
}

但是 QML Repeater只允许一个元素。任何想法如何获得我想要的布局？

+------------+---------------------------------------+
|            |                                       |
|  title0    |         value0                        |
|            |                                       |
|            |                                       |
+------------+---------------------------------------+
|            |                                       |
|            |                                       |
|  title1    |         value1                        |
|            |                                       |
|            |                                       |
+------------+---------------------------------------+
|            |                                       |
|  title2    |         value2                        |
|            |                                       |
|            |                                       |
+------------+---------------------------------------+

Answer 1

您可以简单地使用两个 Repeater s 内 GridLayout ， 如下:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Window {
    width: 600; height: 400; visible: true

    GridLayout {
        id: grid
        anchors.fill: parent
        columns: 2
        rowSpacing: 5
        columnSpacing: 5
        anchors.margins: 5
        // example models
        property var titles: [ "title1", "title2", "title3", "title4", "title5" ]
        property var values: [ "value1", "value2", "value3", "value4", "value5" ]

        Repeater {
            model: grid.titles
            Label {
                Layout.row: index
                Layout.column: 0
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }

        Repeater {
            model: grid.values
            TextArea {
                Layout.row: index
                Layout.column: 1
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }
    }
}

index参数可免费使用并存储模型的当前行。

通过使用 Layout.fillWidth您可以控制的附加属性 width单列的。

当然，属于一列的每个单元格与该列的所有其他单元格具有相同的大小，这与使用两个 Column 发生的情况不同。成分。

此解决方案有一些缺点，但如果您的目的主要是从模型打印纯数据，则它很好。