Qt 快速 QML GridLayout 使用 JSON

Question

我有下面的 JSON 我想在 GridLayout 中显示。
此 JSON 在 QML 文件中接收并分配给属性。

{
    {
        "id":1
        "name": "abc1"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    },
    {
        "id":2
        "name": "abc2"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    },
    {
        "id":2
        "name": "abc3"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    }
}

我想在5-Columns和3-Rows GridLayout 中显示这个 JSON。
如下表所示：

+---------+--------------------+-----------------+-----------------+----------------+
|   Id    |  Name              |  Age            |    City         |    Gender      |
+---------+--------------------+-----------------+-----------------+----------------+
|    1    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       |
+---------+--------------------+-----------------+-----------------+----------------+
|    2    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       | 
+---------+--------------------+-----------------+-----------------+----------------+
|    3    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       |
+---------+--------------------+-----------------+-----------------+----------------+

到目前为止，我已经想到了以下解决方案：

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: 5
        rowSpacing: 2
        columnSpacing: 2
        anchors.margins: 5

        // example models
        property var id: [ 1, 2, 3, 4, 5 ]
        property var name: [ "value1", "value2", "value3", "value4", "value5" ]
        property var age: [ 10, 20, 30, 40, 50 ]
        property var city: [ "value1", "value2", "value3", "value4", "value5" ]
        property var gender: [ "m", "f", "m", "f", "m" ]

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

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

        Repeater {
            model: grid.age
            TextFiled {
                Layout.row: index
                Layout.column: 2
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }


        // And rest of Repeater for next columns 
        // ....

    }
}

这是正确的方法吗？
此外，我想将 ComboBox 和 TextFiled 中的更新值保存到 JSON 中，我该怎么做？

Answer 1

假设您提供了不正确的 JSON（我已修复），我将使用以下解决方案。 相同的解决方案可以基于 Object.keys()，正如 @Amfasis 已经提到的，但在这种情况下，所有属性在所有数组对象中的顺序都应该相同。

Component {
    id: tableHeader
    Text {
        text: modelData
        font.bold: true
    }
}

Component {
    id: tableCell
    Repeater {
        property var arr: modelData
        model: layout.cols.length
        delegate: Text {
            text: arr[layout.cols[index]]
        }
    }
}

GridLayout {
    id: layout
    columns: 5
    anchors.fill: parent
    anchors.margins: 10
    property var cols: ['id','name','age','city','gender']
    property var json: [
        {
            "id": 1,
            "name": "abc1",
            "age": 10,
            "city": "xvy",
            "gender": "m/f"
        },
        {
            "id": 2,
            "name": "abc2",
            "age": 20,
            "city": "xvy",
            "gender": "m/f"
        },
        {
            "id": 3,
            "name": "abc3",
            "age": 30,
            "city": "xvy",
            "gender": "m/f"
        }
    ]

    Repeater {
        model: layout.cols
        delegate: tableHeader
    }

    Repeater {
        model: layout.json
        delegate: tableCell
    }
}