QML::ListView

ListView

1.0 ListView基础使用方法

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

// ListView01.qml
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 侧边导航栏切换页面

1. SwipeView是一个带滑动功能的QStackedWidget。
2. component.oncompleted 是一个钩子，用于指定在 QML组件加载和初始化完成后执行的操作。这个钩
子会在组件的所有子组件被创建并完成其初始化后触发。
3. 通过Qt.createComponent("xx.qml")方法动态加载控件。

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Rectangle
{
    id : itemrect
    width: 100;
    height: 30
    color: "#000000"
    border.color: "gray"
    border.width: isclicked ? 0:1

    property var text: ""
    property int index: 0
    property bool isclicked: false
    signal sig_clicked(int index);  //自定义信号

    function clearColor(){
        color = "#000000"
        isclicked = false
    }

    Text {
        anchors.centerIn: parent
        text: itemrect.text
        color: "white"
    }

    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        propagateComposedEvents:true
        onClicked: {
            parent.color = "#98A9EE"
            sig_clicked(index);
            isclicked = true
        }
        onEntered:
        {
            if (!isclicked)
                parent.color = "#767C7C"
        }
        onExited:
        {
            if (!isclicked)
                parent.color = "#000000"
        }
    }
}

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.2

Rectangle
{
    anchors.fill: parent
    color: "#000000"

    SwipeView {
        id: swipeView
        anchors.left: rootitem.right
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        currentIndex: 0
        Rectangle{
            color: "#649090"
        }
        Rectangle{
            color: "green"
        }
        Rectangle{
            color: "#525AC1"
        }
    }

    //导航栏
    Rectangle
    {
        id : rootitem
        anchors.left: parent.left
        width: 100;
        height: parent.height;
        color: "#1B96D1"

        ColumnLayout{
            id : layout
            width: parent.width
            Layout.fillWidth: true
            spacing: 1
        }
    }
    // 加载qml控件
    function addItem(text,index)
    {
        var component = Qt.createComponent("ItemRect.qml");
        if (component.status == Component.Ready)
        {
            var itemrect = component.createObject(layout);
            itemrect.text = text;
            itemrect.index = index;
            // 信号的关联槽函数
            itemrect.sig_clicked.connect(soltItemClicked);
        }
    }
    // 组件初始化完后执行,填充导航栏
    Component.onCompleted:
    {
        addItem("页面1",0)
        addItem("页面2",1)
        addItem("页面3",2)
    }

    // 事件处理
    function soltItemClicked(index)
    {
        swipeView.currentIndex = index;
        for (var i in layout.children)
        {
            if (layout.children[i].index != index)
                layout.children[i].clearColor();
        }
    }
}

##### 3.0 侧边导航栏可折叠