QML中ListView控件的使用

使用ListView控件，需要特别注意两个部分：一个是ListView的Model，它用来提供要显示的数据，可以由QML中的类ListModel、XmlListModel提供，甚至可以用C++中的QAbstractItemModel或QAbstractListModel来提供；第二个是delegate，它用来定义数据该如何显示，一般使用Component来实现。

1 快速使用ListView

1.1 实现ListView

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

上面代码中定义了使用了ListView的最简单用法，我们只需要接下来实现model和delegate即可。

1.2 实现model

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

上面代码中使用了ListModel来为ListView提供数据，每条数据都包含两条信息，一条是icon，另一条是name，这两条信息后面都会用在delegate中。

1.3 实现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
            }
      }
    }
}

上面实现的Component，首先它由鼠标区域全覆盖，也就是可以相应它的点击事件；其次采用了Row布局，先放图片（用于指示是否展开），其次放入文本（指示此条信息）。

2 完整代码及效果

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