QML：ListElement: cannot use script for property value解决方法

可参考  https://stackoverflow.com/questions/7659442/listelement-fields-as-properties

ListElement不是传统意义上的QML属性，因此无法进行属性绑定。

The ListElement fields are not QML properties in the traditional sense, but rather the roles in its parent ListModel. So property binding does not work in this case. That is why you get QML error: "ListElement: cannot use script for property value", which is a bit confusing.

Although there has been a request submitted to the Qt Team to have this fixed, so far no resolution has been implemented.

In the meantime, if you do not want to implement your own C++ class to handle the list model, as suggested by @Luca Carlon, there is a QML workaround/solution I have tried which works. The main points are:

• Do not use ListModel when its fields need to reference other properties.
• Instead, use ListModel.append() for the model initialization, and use ListModel.setProperty() for the model updating. Inside the argument list of these 2 method calls, the roles can be assigned to the other properties, which is equivalent to property binding.

Applying this QML workaround/solution to your original example code will result in the following revised example code

可参考以下写法，或者定义一个数组显示。

import QtQuick 2.0

Rectangle {
    width: 400
    height: 200

    ListModel {
        property real firstValue: 2
        property real secondValue: 3
        property real thirdValue: 1
        id: leftGrid

    // The commented-out code belowwon't work:
    // ListElement:Cannot use script for property value.
    //        ListElement {
    //            icon: "Images/1.png"
    //            value: leftGrid.firstValue
    //        }
    //        ListElement {
    //            icon: "2.png"
    //            value: -1
    //        }
    //        ListElement {
    //            icon: "3.png"
    //            value: leftGrid.secondValue
    //        }
    //        ListElement {
    //            icon: "4.png"
    //            value: leftGrid.thirdValue
    //        }
    // QML workaround/solution to the above code:

        // 1. Initialize the list model:
        property bool completed: false
        Component.onCompleted: {
            append({"icon": "Images/1.png", value: leftGrid.firstValue});
            append({"icon": "2.png", value: -1});
            append({"icon": "3.png", value: leftGrid.secondValue});
            append({"icon": "4.png", value: leftGrid.thirdValue});
            completed = true;
        }

        // 2. Update the list model:
        onFirstValueChanged: {
            if(completed) setProperty(0, "value", leftGrid.firstValue);
        }
        onSecondValueChanged: {
            if(completed) setProperty(2, "value", leftGrid.secondValue);
        }
        onThirdValueChanged: {
            if(completed) setProperty(3, "value", leftGrid.thirdValue);
        }
    }
}