qml----Model/View入门ListView分组显示

Posted 2020-10-19 Qt王二狗

除了动画效果外，还有一个实用的功能就是按条件分组。如同手机里通讯录一般

section,就是实现分组的主角，简略讲讲这个主角的本领

section.property　　表明了分组的依据，比如section.property: "cost"

section.criteria　指定了section,property的判断条件，通常有ViewSection.FullString和ViewSection.FirstCharacter两种，全串匹配和首字母匹配。匹配时不区分大小写

section.delegate　通过设置一个component,来显示每个section

还有很多section的属性，具体的可查帮助文档。不过有一点需要注意：listview的分组不会自动排序，也就是说，如果apple和huawei的手机交替出现时，那么listview则可能会显示多个           相同的section.

下面是个具体的实例

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

Rectangle {
    width: 360
    height: 400
    color: "#EEEEEE"

    Component{
        id: phoneModel

        ListModel{
            ListElement{
                name: "iphone 5"
                cost: "4900"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 3gs"
                cost: "1000"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 4"
                cost: "1800"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 4s"
                cost: "2300"
                manufacture: "Apple"
            }

            ListElement{
                name: "B199"
                cost: "1590"
                manufacture: "HuaWei"
            }

            ListElement{
                name: "c88160"
                cost: "590"
                manufacture: "HuaWei"
            }

            ListElement{
                name: "galaxy s5"
                cost: "2300"
                manufacture: "sumsung"
            }

            ListElement{
                name: "galaxy s7"
                cost: "4900"
                manufacture: "sumsung"
            }

            ListElement{
                name: "galaxy s4"
                cost: "1200"
                manufacture: "sumsung"
            }

            ListElement{
                name: "MI5"
                cost: "2300"
                manufacture: "XiaoMi"
            }
        }
    }// phoneModel is end

    Component{
        id: phoneDelegate

        Item {
            id: wrapper
            width: parent.width
            height: 30
            ListView.onAdd: console.log("count:", ListView.view.count)

            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8

                Text{
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 120
                }

                Text{
                    text: cost
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }

                Text{
                    text: manufacture
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }
        }
    }//phoneDelegate is end

    Component{
        id: sectionHeader

        Rectangle{
            width: parent.width
            height: childrenRect.height
            color: "lightsteelblue"
            Text{
                text: section
                font.bold: true
                font.pointSize: 20
            }
        }
    }//sectionHeader is end

    ListView{
        id: listView
        anchors.fill: parent
        delegate: phoneDelegate
        model: phoneModel.createObject(listView)
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

        /*  特别注意的是，listview的分组不会引起listview自动按分组来处理Item的顺序。如果listView的Model
         *  内的数据没有按分组顺序编排，比如说samsung和apple的手机在model内交替出现，那么listview则可能会
         *  显示多个相同的section
         */
        section.property: "manufacture"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeader
    }
}