Roson的Qt之旅#102 QML ListModel

1.ListModel概述

ListModel是一个简单的容器,可以包含 ListElement类型存储数据。

ListModel的数据项数目可以使用count 属性获得。为了维护模型中的数据,该类型还提供了一系列函数,包括追加append(),插人 insert()、移动move()、移除remove()和替换set()等。这些函数都接受字典类型作为其参数,这种字典类型会被模型自动转换成 ListElement对象。如果需要通过模型修改ListElement中的内容,可以使用setProperty()函数,这个函数可以修改给定索引位置的 ListElement的属性值。

ListElement需要在ListModel中定义,表示能够在 ListView或Repeater 中使用的数据项

ListElement 的使用同其他QML类型基本没有区别,不同之处在于,ListElement没有固定的属性,而是一系列自定义的键值。可以把 ListElement看作是一个键值对组成的集合,其中键被称为role(角色)。它使用与属性相同的语法进行定义。角色既定义了如何访问数据,也定义了数据本身。角色的名字以小写字母开始,并且应当是给定模型中所有 ListElement通用的名字。角色的值必须是简单的常量:字符串(带有引号,可以包含在QT_ TR_NOOP调用中)、布尔类型(true和 false)、数字或枚举类似(例如AlignText. AlignHCenter)。角色的名字供委托获取数据使用。每一个角色的名字都可以在委托的作用域内访问,并且指向当前ListElement 中对应的值。另外,角色还可以包含列表数据,例如包含多个ListElement.

2.代码示例

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQml.Models 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: fruitModel

        ListElement {
            name: "Apple"
            cost: 2.45
            attributes: [
                ListElement {
                    description: "core"
                },
                ListElement {
                    description: "Deciduous"
                }
            ]
        }
        ListElement {
            name: "Orange"
            cost: 3.25
            attributes: [
                ListElement {
                    description: "Citrus"
                }
            ]
        }

        ListElement {
            name: "Banana"
            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: "Attributes:"
                }
                Repeater {
                    model: attributes
                    Text {
                        text: description
                    }
                }
            }

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

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

运行结果： 

3.代码释义

上面的代码使用了一个 ListModel模型对象,用于存储一个水果信息的列表。ListModel包含了3个数据条目,分别由一个 ListElement类型表示。每个 ListElement都有3个角色;name, cost和 attributes,分别表示了水果的名字、售价和特色描述,其中attributes角色使用了列表数据。这里使用了ListView展示这个模型(也可以使用Repeater,方法是类似的)。ListView需要指定两个属性:model和 delegate。model属性指定定义的fruitModel模型;delegate指定自定义委托。这里使用Component内联组件作为委托,其中使用Text、Row等 Qt Quick项目定义每个数据条目的显示方式。在其中可以直接使用 ListElement中定义的角色。对于attributes 角色,这里使用了Repeater进行显示。委托还使用了MouseArea,在其中调用了setProperty()函数。当在一个数据条目上单击鼠标时,其售价都会翻倍。这里使用了index获取模型中被鼠标单击的数据项索引。

注意：动态创建的内容一旦设置完成就不能再被修改。setProperty函数只能修改那些直接在模型中显式定义的元素的数据。