Populate GridLayout with Repeater

Question

I try to add cells to my GridLayout by using a Repeater. My data is stored in a model and containing two properties per element:

Answer 1

You can simply use two Repeaters within a GridLayout, as follows:

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

The index parameter is freely available and store the current row of the model.

By using the Layout.fillWidth attached property you can control the width of the single column.

Of course, each cell that belongs to a column has the same size of all the other cells of that column, unlike what happens using two Column components.

This solution has a few drawbacks, but it's good if your purpose is mainly to print plain data from a model.