列表中的QML渲染列表

Question

我的简化代码是

import QtQuick 2.0

Item {

    ListModel {
        id: items_model
        dynamicRoles: true
    }

    Component.onCompleted: {
        var data = {
            "items": [{
                    "name": "test1",
                    "rows": ["1", "2", "3"]
                }, {
                    "name": "test2",
                    "rows": ["1", "2", "3"]
                }, {
                    "name": "test3",
                    "rows": ["1", "2", "3"]
                }]
        }

        data.items.forEach(function (element) {
            items_model.append(element)
            console.log(element.rows)
        })

        console.log(items_model.count)
    }

    ListView {
        orientation: ListView.Horizontal

        model: items_model
        delegate: Item {

            height: parent.height
            width: 50

            Column {
                anchors.fill: parent
                Text {
                    text: name
                }

                Repeater {
                    model: rows
                    delegate: Text {
                        text: rows.get(index) + " " + index
                        Component.onCompleted: {
                            console.log(rows.get(index))
                        }
                    }
                }
            }
        }
    }
}

但我有DynamicRoleModelNode，而不是文本。

qml: DynamicRoleModelNode(0x563014585300)
qml: DynamicRoleModelNode(0x563014585330)
qml: DynamicRoleModelNode(0x563014585360)
qml: DynamicRoleModelNode(0x563014570350)
qml: DynamicRoleModelNode(0x563014570380)
qml: DynamicRoleModelNode(0x5630145703b0)
qml: DynamicRoleModelNode(0x563014558e00)
qml: DynamicRoleModelNode(0x563014558e30)
qml: DynamicRoleModelNode(0x563014558e60)

modelData 未提供，因为 rows 转为 QQmlListModel

我如何从中提取文本？

Answer 1

看看这里关于模型的文档。

https:/doc.qt.ioqt-5qtquick-modelviewsdata-modelview.html#models

特别是。

没有命名角色的模型(如下面所示的ListModel)将通过modelData角色提供数据。modelData 角色也为只有一个角色的模型提供。在这种情况下，modelData角色包含与命名角色相同的数据。

因此，在您的案例中，您正在寻找的字符串数据将被提供在一个叫做 modelData 在此背景下 Text 组件。

请注意，在您的特定情况下，这不能直接完成，因为ListModel正在转换子角色 items 变成一个ListModel本身，而不是一个StringList模型。这可能是Qt中的一个bug，因为你会认为你通常应该在那里得到一个StringList。

为了解决这个问题，你可以将你的子项目存储在一个单独的地图中，然后直接应用到Repeater中，这样你就可以正确地得到一个StringList模型，然后modelData就可以正常工作了。

类似这样。

    property var itemsMap: ({
                                "test1": ["1", "2", "3"],
                                "test2": ["1", "2", "3"],
                                "test3": ["1", "2", "3"]
                            })

    Item {

        ListModel {
            id: items_model
            dynamicRoles: true
        }

        Component.onCompleted: {

            var data = {
                "items": [{
                        "name": "test1"
                    }, {
                        "name": "test2"
                    }, {
                        "name": "test3"
                    }]
            }

            data.items.forEach(function (element) {
                items_model.append(element)
            })

            console.log(items_model.count)
        }

        ListView {
            orientation: ListView.Horizontal

            model: items_model
            delegate: Item {

                height: parent.height
                width: 50

                Column {
                    anchors.fill: parent
                    Text {
                        text: name
                    }

                    Repeater {
                        model: itemsMap[name]
                        delegate: Text {
                            text: modelData
                        }
                    }
                }
            }
        }
    }

Answer 2

作为变通方法，把文本包到对象上

    data.items.forEach(function (element) {
        element.rows.forEach(function (item, index) {
              element.rows[index] = {text: item}
        })

        items_model.append(element)
    })

和

Repeater {

                model: rows
                delegate: Text {
                    text: text
                }
          }