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

最新推荐文章于 2024-07-14 02:07:41 发布

原创最新推荐文章于 2024-07-14 02:07:41 发布 · 4.1k 阅读

11 ·

CC 4.0 BY-SA版权

qt 同时被 2 个专栏收录

6 篇文章

订阅专栏

QML

4 篇文章

订阅专栏

本文介绍了解决QML中ListModel无法直接绑定ListElement字段的问题。通过使用ListModel的append和setProperty方法来间接实现属性绑定的效果，避免了ListElement:不能使用脚本为属性赋值的错误。

可参考 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);
        }
    }
}