QML ListElement 传递字符串列表

Posted 2023-02-17

【中文标题】QML ListElement 传递字符串列表

【英文标题】：QML ListElement pass list of strings

【发布时间】：2016-07-26 20:26:32

【问题描述】：

我有一个listview，其代表中有一个转发器，它应该由文本填充。如果中继器的模型属性是这样硬编码的：

model: ['String 1', 'String 2', 'String 3'];

通过在中继器区域显示 3 个项目，它可以完美运行。 但是，我想使用ListElement 发送这样的列表，这就是我尝试过的：

ListElement
    shape: "Circle"; colors: ['Red', 'Blue'];

不幸的是，这种方法不起作用并引发错误：

ListElement：属性值不能使用脚本

我实现了多少？ TIA

【问题讨论】：

颜色列表的目的是什么？此列表（“红色”、“蓝色”）是否旨在成为列表元素的实际颜色？您是否希望 ListView 包含实际的字符串“Red”和“Blue”？

@C.Korb 这只是一个模糊的例子，原始字符串是不同的。属性名称也是如此。

【参考方案1】：

You can't:

值必须是简单的常量；字符串（在 QT_TR_NOOP 的调用中被引用并可选）、布尔值（true、false）、数字或枚举值（例如 AlignText.AlignHCenter）。

向视图公开数据最有效的方法是创建C++ model。

但是，如果您真的不想使用 C++，您可以将颜色存储在逗号分隔的字符串中，然后将它们拆分：

import QtQuick 2.6
import QtQuick.Window 2.0

Window 
    visible: true
    width: 200
    height: 200

    ListView 
        width: 32
        height: 64
        anchors.centerIn: parent
        model: ListModel 
            ListElement
                shape: "Circle"
                colors: "red, blue"
            
            ListElement
                shape: "Square"
                colors: "green,yellow"
            
        
        delegate: Rectangle 
            width: 32
            height: 32
            radius: shape === "Circle" ? width / 2 : 0

            property var colorArray: colors.split(",")

            gradient: Gradient 
                GradientStop 
                    position: 0
                    color: colorArray[0]
                
                GradientStop 
                    position: 1
                    color: colorArray[1]
                
            
        
    

【讨论】：

我已经使用过这种方法，但我一直在等待更好的答案。谢谢！至少现在我知道我可以直接在 model 属性的变量声明上调用 split 函数。

【参考方案2】：

@Mitch 的答案的替代方法是放弃 ListModel 并使用纯 javascript 对象数组作为模型。

使用该解决方案，您将失去ListModel 的动态功能（添加、删除、插入......）。您也无法在视图中使用部分或在此模型上使用代理模型。

import QtQuick 2.6
import QtQuick.Window 2.0

Window 
    visible: true
    width: 200
    height: 200

    ListView 
        width: 32
        height: 64
        anchors.centerIn: parent
        model: [
            
                shape: "Circle",
                colors: ["red", "blue"]
            ,
            
                shape: "Square",
                colors: ["green", "yellow"]
            
        ]
        delegate: Rectangle 
            width: 32
            height: 32
            radius: modelData.shape === "Circle" ? width / 2 : 0

            gradient: Gradient 
                GradientStop 
                    position: 0
                    color: modelData.colors[0]
                
                GradientStop 
                    position: 1
                    color: modelData.colors[1]