QML类型：ListElement、ListModel

ListElement

一、描述

列表元素，在 ListModel 中定义，并表示将使用 ListView 或 Repeater 项目显示的列表中的项目。

列表元素包含角色定义的集合而不是属性。角色既定义了数据的访问方式，又包含了数据本身。

用于角色的名称必须以小写字母开头，并且应该对给定模型中的所有元素通用。值必须是简单的常量、字符串、布尔值、数字或枚举值。

允许将函数声明分配给角色。

二、引用角色

代理使用角色名称从列表元素中获取数据。每个角色名称都可以在委托范围内访问，并引用当前元素中的相应角色。在角色名称使用不明确的情况下，可以通过模型属性访问它（例如，model.cost 而不是 cost）。

三、使用示例

以下模型定义了一系列列表元素，每个元素都包含“name”和“cost”角色及其关联值。

ListModel 
{
    id: fruitModel

    ListElement 
    {
        name: "Apple"
        cost: 2.45
    }
    ListElement 
    {
        name: "Orange"
        cost: 3.25
    }
    ListElement 
    {
        name: "Banana"
        cost: 1.95
    }
}

委托通过简单地引用名称和成本来获取每个元素的“name”和“cost”：

ListView 
{
    anchors.fill: parent
    model: fruitModel
    delegate: Row 
    {
        Text { text: "Fruit: " + name }
        Text { text: "Cost: $" + cost }
    }
}

---

ListModel

一、描述

ListModel 是一个简单的 ListElement 定义容器，每个定义都包含数据角色。内容可以动态定义，也可以在 QML 中显式定义。

二、使用示例

import QtQuick 2.0

Rectangle
{
    width: 200; height: 200

    ListModel //模型-提供数据
    {
        id: fruitModel
        ListElement 
        {
            name: "Apple"
            cost: 2.45
        }
        ListElement 
        {
            name: "Orange"
            cost: 3.25
        }
        ListElement 
        {
            name: "Banana"
            cost: 1.95
        }
    }

    Component //委托-提供一个展示数据的示例（如何展示一个模型中的数据）
    {
        id: fruitDelegate
        Row 
        {
            spacing: 10
            Text { text: name }
            Text { text: '$' + cost }
        }
    }

    ListView //视图-设置委托和模型，根据委托提供的展示方式展示模型提供的数据
    {
        anchors.fill: parent
        model: fruitModel
        delegate: fruitDelegate
    }
}

角色可以包含列表数据：

import QtQuick 2.12
import QtQuick.Window 2.0

Window
{
    id:root;
    visible: true;
    width: 1000;
    height: 500;
    title: "hello world"

    Rectangle
    {
        width: 200; height: 200

        ListModel {
            id: fruitModel

            ListElement
            {
                name: "苹果"
                cost: 2.45
                attributes:
                [
                    ListElement { description: "Core" },
                    ListElement { description: "Deciduous" }
                ]
            }
            ListElement
            {
                name: "橘子"
                cost: 3.25
                attributes:
                [
                    ListElement { description: "Citrus" }
                ]
            }
            ListElement
            {
                name: "香蕉"
                cost: 1.95
                attributes:
                [
                    ListElement { description: "Tropical" },
                    ListElement { description: "Seedless" }
                ]
            }
        }

        Component
        {
            id: fruitDelegate
            Item
            {
                width: 200; height: 50
                Text { id: nameField; text: name }
                Text { text: ' $ ' + cost; anchors.left: nameField.right }
                Row
                {
                    anchors.top: nameField.bottom
                    spacing: 5
                    Text
                    { text: "属性：" }
                    Repeater
                    {
                        model: attributes
                        Text { text: description }
                    }
                }
            }
        }

        ListView
        {
            anchors.fill: parent
            model: fruitModel
            delegate: fruitDelegate
        }
    }
}

三、修改列表模型

可以使用 clear()、append()、set()、insert() 和 setProperty() 方法创建和修改 ListModel 的内容。

例如：

        Component
        {
            id: fruitDelegate
            Item
            {
                width: 200; height: 50
                Text { text: name }
                Text { text: '$' + cost; anchors.right: parent.right }

                MouseArea
                {
                    anchors.fill: parent
                    onClicked: fruitModel.setProperty(index, "cost", cost * 2)
                }
            }
        }

在动态创建内容时，属性集一旦设置就无法更改。

四、在 WorkerScript 中使用线程列表模型

ListModel 可以与 WorkerScript 一起使用，从多个线程访问列表模型。列表操作可以移动到不同的线程以避免阻塞主 GUI 线程。

这是一个使用 WorkerScript 定期将当前时间附加到列表模型的示例：

import QtQuick 2.12
import QtQuick.Window 2.0

Window
{
    id:root;
    visible: true;
    width: 1000;
    height: 500;
    title: "hello world"

    Rectangle
    {
        width: 200; height: 200

        ListModel
        {
            id: listModel
        }

        Component
        {
            id: fruitDelegate
            Item
            {
                width: 200; height: 25
                Text { text: time }
            }
        }

        ListView
        {
            anchors.fill: parent
            model: listModel
            delegate: fruitDelegate
        }

        WorkerScript
        {
            id: worker
            source: "qrc:/dataloader.js"
        }

        Timer
        {
            id: timer
            interval: 1000; repeat: true
            running: true
            triggeredOnStart: true

            onTriggered:
            {
                var msg = {'action': 'appendCurrentTime', 'model': listModel};
                worker.sendMessage(msg);
            }
        }
    }
}

dataloader.js

WorkerScript.onMessage = function(msg)
{
    if (msg.action === 'appendCurrentTime')
    {
        var data = {'time': new Date().toTimeString()};
        msg.model.append(data);
        msg.model.sync();
    }
}

计时器通过调用 WorkerScript::sendMessage() 向工作脚本发送消息。收到此消息后，会在 dataloader.js 中调用 WorkerScript.onMessage()，将当前时间附加到列表模型中。

必须调用 sync() 否则从该线程对列表所做的更改将不会反映在主线程的列表模型中。

五、属性成员

1、count : int

模型中数据条目的数量。

2、dynamicRoles : bool

是否启用动态角色。默认被禁用。

默认情况下，角色的类型在第一次使用时固定。例如，创建一个名为“data”的角色并为其分配一个数字，则不能再为“data”角色分配字符串。但是，当启用 dynamicRoles 属性时，给定角色的类型不是固定的，元素之间可以不同。

dynamicRoles 属性必须在任何数据添加到 ListModel 之前设置，并且必须从主线程设置。

具有静态定义的数据（通过 ListElement 定义）的 ListModel 不能启用 dynamicRoles 属性。

使用启用了动态角色的 ListModel 会产生显着的性能成本。成本因平台而异，但通常比使用静态角色类型慢 4-6 倍。

六、成员函数

1、append(jsobject dict)

将一个新项目添加到列表模型的末尾，其值在 dict 中。

2、clear()

从模型中删除所有内容。

3、object get(int index)

返回列表模型中索引处的项目。这允许从 JavaScript 访问或修改项目数据。

Component.onCompleted: 
{
    fruitModel.append({"cost": 5.95, "name":"Jackfruit"});
    console.log(fruitModel.get(0).cost);
    fruitModel.get(0).cost = 10.95;
}

此方法用于访问元素：

fruitModel.append(..., "attributes":
                        [{"name":"spikes","value":"7mm"},
                         {"name":"color","value":"green"}]);

fruitModel.get(0).attributes.get(1).value; // == "green"

不保证返回的对象保持有效。不应该用于属性绑定。

4、insert(int index, jsobject dict)

在位置 index 处向列表模型添加一个新项目，其值在 dict 中。

index 必须指向列表中的现有项目，或者列表末尾之后的一项（相当于 append()）。

fruitModel.insert(2, {"cost": 5.95, "name":"Pizza"})

5、move(int from, int to, int n)

将 n 个项目从一个位置移动到另一个位置。from 和 to 范围必须存在。

例如，将前 3 个项目移动到列表的末尾：

fruitModel.move(0, fruitModel.count - 3, 3)

6、remove(int index, int count = 1)

从模型中删除 index 处的计数项。

7、set(int index, jsobject dict)

使用 dict 中的值更改列表模型中索引处的项目。

如果 index 等于 count() ，则将新项目附加到列表中。否则，index 必须是列表中的元素。

fruitModel.set(3, {"cost": 5.95, "name":"Pizza"})

 8、setProperty(int index, string property, variant value)

将列表模型中 index 处项目的属性更改为 value。index 必须是列表中的元素。

fruitModel.setProperty(3, "cost", 5.95)

9、sync()

在从工作脚本修改列表模型后，将任何未保存的更改写入列表模型。