The use of ListView control in QML

To use the ListView control, you need to pay special attention to two parts: one is the Model of ListView, which is used to provide the data to be displayed, which can be provided by the class ListModel, XmlListModel in QML, or even QAbstractItemModel or QAbstractListModel in C++; The second is delegate, which is used to define how the data should be displayed, generally implemented using Component.

1 Quick use of ListView

1.1 Implement ListView

ListView {
    id: listView
    anchors.fill: parent
    delegate: listDelegate
    model: listModel
}

The above code defines the simplest usage using ListView, we only need to implement the model and delegate next.

1.2 Realize the model

ListModel {
    id: listModel
    ListElement {
        icon: "qrc:/CaretRight.png"
        name: qsTr("情况一")
    }
    ListElement {
        icon: "qrc:/CaretRight.png"
        name: qsTr("情况二")
    }
}

The above code uses ListModel to provide data for ListView. Each piece of data contains two pieces of information, one is icon and the other is name. These two pieces of information will be used in the delegate later.

1.3 implement delegate

Component {
    id: listDelegate
    Item {
        id: delegateRoot
        width: parent.width
        height: 30
        // 鼠标区域
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(name, "on clicked")
            }
        }
        // Row布局
        RowLayout {
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            spacing: 8
            // 图标
            Image {
                source: icon
                Layout.preferredWidth: 25
                Layout.preferredHeight: 25
            }
            // 名称
            Text {
                text: name
                font {
                    pixelSize: 18
                }
                color: "white"
                Layout.fillWidth: true
            }
      }
    }
}

The Component implemented above, first of all, it is fully covered by the mouse area, that is, it can respond to its click event; secondly, it adopts the Row layout, first puts the picture (to indicate whether to expand), and then puts the text (indicating this piece of information).

2 Complete code and effect

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Item {
    id: root
    width: 360
    height: 300

    // 用Rectangle作为背景
    Rectangle {
        id: bg
        anchors.fill: parent
        color: "#353535"
    }

    // ListView
    ListView {
        id: listView
        anchors.fill: parent
        delegate: listDelegate
        model: listModel
    }

    // ListModel
    ListModel {
        id: listModel
        ListElement {
            icon: "qrc:/CaretRight.png"
            name: qsTr("情况1")
        }
        ListElement {
            icon: "qrc:/CaretRight.png"
            name: qsTr("情况2")
        }
    }

   // delegate
   Component {
       id: listDelegate
       Item {
            id: delegateRoot
            width: parent.width
            height: 30

            // 鼠标区域
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log(name, "on clicked")
                }
            }

            // Row布局
            RowLayout {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8

                // ICON
                Image {
                    source: icon
                    Layout.preferredWidth: 25
                    Layout.preferredHeight: 25
                }

                // TEXT
                Text {
                    text: name
                    font {
                        pixelSize: 18
                    }
                    color: "white"
                    Layout.fillWidth: true
                }
            }
       }
   }
}