javascript - 列表元素和 JavaScript 值

Question

我正在尝试创建一个列表并向其附加从 xml http 请求检索到的值。我只测试了一个值为 typeAssetProcess 的文本 block ，它打印得很好，但是当我开始尝试使用列表时，一切都开始崩溃。我做错了什么以及如何解决它？

import QtQuick 2.0
import "../controls" as Controls
Item {

Column {
    id: column

    width: parent.width
    height: parent.height
}

ListView {
    id: listView

    width: parent.width
    height: parent.height
    model: ListModel {
        ListElement {
            name: qstr("Proccess: %1").arg(typeAssetProcess)
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
    }
    delegate: Item {
        x: 5
        width: 80
        height: 40
        Row {
            id: row1
            Rectangle {
                width: 40
                height: 40
                color: colorCode
            }

            Text {
                text: name
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
            }
            spacing: 10
        }
    }
}

}

这段代码是有问题的:

ListElement {
    name: qstr("Proccess: %1").arg(typeAssetProcess)
    colorCode: "grey"
}

Answer 1

这是 ListElement 的已知限制类型，包含“Angular 色定义而不是属性的集合”。这就是为什么您不能对这些 Angular 色使用脚本或属性绑定(bind)(否则您会收到错误ListElement:无法使用脚本作为属性值)。

经常向 Qt 团队提出改进请求，但据我所知，目前还没有实现。

您可以做的一件事是动态初始化模型，而不是使用固定的ListElement:

ListView {
    id: listView

    readonly property var modelElements: [
        {
            name: qsTr("Proccess: %1").arg(typeAssetProcess),
            colorCode: "grey"
        },
        {
            name: "Red",
            colorCode: "red"
        },
        {
            name: "blue",
            colorCode: "blue"
        },
        {
            name: "Green",
            colorCode: "green"
        }]

    Component.onCompleted: {
        modelElements.forEach(function(element) {
            model.append(element)
        })
    }

    width: parent.width
    height: parent.height
    model: ListModel {}
    delegate: ...
}

您还可以选择用 C++ 实现您自己的模型。