如何在 QML 中显示二维数组的值？

Question

所以我在我的 qml 的根元素中创建了一个属性，并用 JavaScript 作为二维数组填充它。我是这样做的：

property var cars: {

    var carList = new Array(root.numberOfCars)

    for (var i=0;i<root.numberOfCars;i++) {

        var carProperties = new Array(numberOfCarProperties);

        carProperties[root.currentStation] = -1;
        carProperties[root.score] = 100;
        carProperties[root.numberOfErrors] = 0;
        carProperties[root.hasProblem] = false;
        carProperties[root.errorScore] = 0;
        carProperties[root.finished] = false;

        carList[i] = carProperties;
    }
    return carList;
}

当程序通过 JavaScript 运行时，数组的值会发生变化。

我想在表格中显示这个二维数组的值，并在它们发生更改时更新它们，此外还有一些影响数组所在行的值的操作按钮。

我只是 QML 和一般编程方面的菜鸟，所以如果这是一个非常基本的问题，请告诉我在哪里可以了解更多信息，因为我在网上找到的学习 QML 的资源很少。

Answer 1

如果您打算可视化数据，纯数组不是理想的解决方案。 QML 视图可以使用数组作为模型，但如果你想反映内部变化，这是低效的。您要么必须强制更新整个视图，重新创建所有视图代理，而不仅仅是更新更改的值，要么您必须实现自己的机制来更新更改。

最容易使用的是ListModel 元素，而不是将属性实现为数组（无论如何都是个坏主意），您可以将它们实现为列表元素属性：

ListModel {
    id: carList 
    ListElement {
        currentStation: -1
        score: 100
        numberOfErrors: 0
        // ...
    }
    ListElement {
        // ...
    }
}

模型可以像上面那样以声明方式填充，也可以强制填充：

carList.append({"currentStation": -1, "score": 100, ...})

您还有通常的索引访问、属性访问等，只需scroll through the doc 即可了解接口。

这样做的好处是您将在视图中获得高效的自动更新。因此，您只需设置一个视图并实现一个用于可视化和操作数据的委托。