Rosen's QT journey 102 listmodel

1.ListModel summary

ListModel It's a simple container , Can contain ListElement Type stores data .

ListModel The number of data items can be used count Attribute gets . To maintain the data in the model , This type also provides a series of functions , Including additions append(), Insert people insert()、 Move move()、 remove remove() And replace set() etc. . These functions all accept dictionary types as their arguments , This dictionary type will be automatically converted into ListElement object . If you need to modify the model ListElement The content in , have access to setProperty() function , This function can modify the given index position ListElement The attribute value .

ListElement Need to be in ListModel In the definition of , Indicates that you can ListView or Repeater Data items used in

ListElement The use of is the same as others QML There is basically no difference in type , The difference is ,ListElement There is no fixed attribute , But a series of customized key values . You can put ListElement As a set of key value pairs , The key is called role( role ). It uses the same syntax as attributes to define . Roles define how to access data , It also defines the data itself . The character's name begins with a lowercase letter , And it should be all in the given model ListElement Common name . The value of the role must be a simple constant : character string ( With quotation marks , Can be included in QT_ TR_NOOP in call )、 Boolean type (true and false)、 Numbers or enumerations are similar ( for example AlignText. AlignHCenter). The name of the role is used by delegates to obtain data . The name of each role can be accessed within the scope of the delegate , And point to the current ListElement Corresponding value in . in addition , Roles can also contain list data , For example, it contains multiple ListElement.

2. Code example

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
    }
}

Running results ： 

 

3. Code interpretation

The above code uses a ListModel Model object , A list for storing fruit information .ListModel Contains 3 Data entries , By one ListElement Type said . Every ListElement There are 3 A character ;name, cost and attributes, They represent the names of fruits 、 Selling price and feature description , among attributes The role uses list data . It's used here ListView Show this model ( You can also use Repeater, The method is similar ).ListView You need to specify two properties :model and delegate.model Property specifies the defined fruitModel Model ;delegate Specify custom delegates . Use here Component Inline components act as delegates , It uses Text、Row etc. Qt Quick The project defines how each data entry is displayed . It can be used directly ListElement Roles defined in . about attributes role , It's used here Repeater Display . Delegates also use MouseArea, Called in it setProperty() function . When you click on a data entry , Its price will double . It's used here index Get the index of data items clicked by the mouse in the model .

Be careful ： Once the dynamically created content is set, it can no longer be modified .setProperty Functions can only modify the data of elements that are explicitly defined directly in the model .