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做側邊導航欄