用Repeater填充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中使用两个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组件发生的情况不同。

这个解决方案有一些缺点，但是如果您的目的主要是打印来自模型的普通数据，那么它是很好的。

Answer 2

您可以使用GridLayout.flow指定应按何种顺序填充单元格，即行(GridLayout.LeftToRight)或按列排列(GridLayout.TopToBottom)。注意，在使用行数时，应该指定GridLayout.TopToBottom。

使用此解决方案，(简化的) skypjack示例将成为：

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 {
        anchors.fill: parent

        // specify the flow and number of rows
        flow: GridLayout.TopToBottom
        rows: repeater.count

        Repeater {
            id: repeater
            model: [ "title1", "title2", "title3", "title4", "title5", "title6" ] // example model
            Label {
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }

        Repeater {
            model: [ "value1", "value2", "value3", "value4", "value5", "value6" ]  // example model
            TextArea {
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }
    }
}

Answer 3

模型视图原则假设每个模型节点由不同的委托组件对象显示.所以我建议你听听@BaCaRoZzo的评论，用Column而不是GridLayout来做。当然，QML非常灵活，您可以这样做：

Component {
    id: labelDelegate
    Label { text: myList.get(_index / 2).title }
}

Component {
    id: textAreaDelegate
    TextArea { text: myList.get(_index / 2).value }
}

ListModel {
    id: myList
    ListElement {title: "title1"; value: "value1"}
    ListElement {title: "title2"; value: "value2"}
    ListElement {title: "title3"; value: "value3"}
}

GridLayout {
    anchors.fill: parent
    columns: 2
    Repeater {
        model: myList.count * 2
        delegate: Loader {
            property int _index: index
            sourceComponent: {
                if(index % 2)
                    return textAreaDelegate;
                else
                    return labelDelegate;
            }
        }
    }
}

但这太奇怪了，不能用在真正的项目中。