QML::ListView

ListView

1.0 ListView基础使用方法

// ListView01.qml
1、通过Component定义Delegate
2、通过ListModel定义mode，通过ListElement定义数据类型
3、定义ListView，通过delegate和model属性绑定mode和Delegate

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 360
    height: 300

    // 1.定义header
    Component {
        id: headerView
        Item {
            width: parent.width
            height: 30
            RowLayout {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8

                Text {
                    width: parent.width; height: 30
                    text: "头像"
                    font.bold: true
                    font.pixelSize: 18
                    color: "white"
                }
                Text {
                    Layout.preferredWidth: 30
                }
                Text {
                    text: "姓名"
                    font.bold: true
                    font.pixelSize: 18
                    color: "white"
                    Layout.preferredWidth: 80
                }
                Text {
                    text: "年龄"
                    font.bold: true
                    font.pixelSize: 18
                    color: "white"
                }
            }
        }
    }

    // 1.定义delegate，内嵌三个Text对象来展示Model定义的ListElement的三个role
    Component {
        id: dataDelegate
        Item {
            id: itemer
            width: parent.width
            height: 30

            // 鼠标点选高亮的效果
            MouseArea {
                anchors.fill: parent;
                onClicked: itemer.ListView.view.currentIndex = index
            }

            // 内嵌三个Text对象，水平布局
            RowLayout {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8

                Image {
                    source: icon
                    sourceSize: Qt.size(30, 30)
                }

                Text {
                    Layout.preferredWidth: 30
                }

                Text {
                    text: name;
                    color: itemer.ListView.isCurrentItem ? "blue" : "white"
                    font.pixelSize: itemer.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }

                Text {
                    text: age;
                    color: itemer.ListView.isCurrentItem ? "blue" : "white"
                    font.pixelSize: itemer.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }
        }
    }

    // 2.ListModel专门定义列表数据的，它内部维护一个 ListElement 的列表。
    ListModel {
        id: dataModel
        // 一个 ListElement 对象就代表一条数据
        ListElement{
            icon: "qrc:/001.png"; name: "张三"; age: "18"
        }
        ListElement{
            icon: "qrc:/001.png"; name: "李四"; age: "19"
        }
        ListElement{
            icon: "qrc:/001.png";name: "王五"; age: "20"
        }
    }

    // 3.定义ListView
    ListView {
        id: listView
        anchors.fill: parent
        // 标题头
        header: headerView
        // 设置的mode和delegate
        delegate: dataDelegate
        model: dataModel
        // 背景高亮
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }
    }
}

2.0 通过ListView做侧边导航栏