QML中ListView数据的分组与定位显示

在QML中ListView的数据分组与定位显示时，以前使用ListView进行数据分组时，都是在model中加入分组数据（分组的项），然后将model中的数据排好序后全部显示到ListView中，这样做也能达到数据分组的目的，但是数据维护太费力，我们自己好做的事情太多，埋下的隐藏问题也就越多。
这次介绍ListView自身的艺术section属性，可以达到数据分组显示的作用，通过设置如下三个属性：
section.property: "name";
section.criteria: ViewSection.FirstCharacter
section.delegate: sectionHeader
然后实现分组显示的代理sectionHeader，如下：

Component {
        id:sectionHeader
        Rectangle {
            width: parent.width
            height: 20
            color: "steelblue"
            Label {
                text: section
                font.bold: true
                font.pixelSize: 20
                anchors.left: parent.left
                anchors.leftMargin: 10
            }
        }
    }

设置了分组的显示样式，即可实现通过model中的name字段的首字母进行分组显示。话不多说先上图，其初步效果如下：

这里需要注意的是，虽然我们不需要对分组项（上图中的蓝色项）进行管理，但是我们需要对ListModel中要显示数据进行排序管理，不然会出现多个分组，也就是说，section不会自动排序，相同section的model数据必须放在连续的一块，不然的话，不连续的section会分别进行显示，这一点要特别注意（即使这样，也比以前所有的项全都自己管理强的多^_^）。
实现了以上功能后，还想模仿手机的联系人列表，通过右侧的字母进行ListView的定位，如下先展示其完整代码：

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import Qt.labs.controls 1.0
import QtQuick.Controls.Styles 1.4


Rectangle {
    id: root
    width: 800
    height: 600
    Component {
        id:sectionHeader
        Rectangle {
            width: parent.width
            height: 20
            color: "steelblue"
            Label {
                text: section
                font.bold: true
                font.pixelSize: 20
                anchors.left: parent.left
                anchors.leftMargin: 10
            }
        }
    }


    Rectangle {
        width: 200
        height: 300
        anchors.centerIn: parent
        color: "grey"


        ListView {
            id: list_view
            anchors.fill: parent
            clip: true
            anchors.margins: 5
            model: list_model
            delegate: Rectangle {
                height: 30
                width: parent.width
                Label {
                    text: name
                    anchors.centerIn: parent
                    color: "green"
                }
            }


            section.property: "name";
            section.criteria: ViewSection.FirstCharacter//ViewSection.FullString
            section.delegate: sectionHeader


            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                onActiveChanged: {
                    active = true;
                }
                Component.onCompleted: {
                    scrollBar.handle.color = "red";
                    scrollBar.active = true;
                    scrollBar.handle.width = 10;
                }
            }
        }


        Rectangle {
            id: lab
            width: 30
            height: width
            color: "red";
            radius: width/2
            opacity: 0.8
            anchors.centerIn: parent
            Label {
                id: curLabel
                font.pixelSize: 26
                font.bold: true
                anchors.centerIn: parent
            }
            visible: false
        }


        Rectangle {
            width: 10
            height: parent.height-100
            anchors.right: parent.right
            anchors.rightMargin: 10
            color: "transparent"
            anchors.verticalCenter: parent.verticalCenter
            Column {
                anchors.centerIn: parent
                spacing: 3
                clip: true
                Repeater {
                    model: ["a","b","c","d","e","f","g","h","i","j","k"]
                    Label {
                        text: modelData
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter


                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                console.log("onClicked:", modelData);
                                var idx = getIndexFromLab(modelData);
                                list_view.positionViewAtIndex(idx, ListView.Beginning)


                                lab.visible = true;
                                curLabel.text = modelData
                            }
                            onExited: lab.visible = false;
                        }
                    }
                }
            }
        }
    }


    function getIndexFromLab(lab)
    {
        var i;
        for (i=0;i<list_model.count;i++)
        {
            if (list_model.get(i).name.substr(0, 1) === lab)
            {
                return i;
            }
        }
        return i<=11?i:7;
    }


	//测试数据
    ListModel{
        id:list_model
        ListElement {
            name: "aItem1"
        }
        ListElement {
            name: "aItem2"
        }
        ListElement {
            name: "aItem3"
        }
        ListElement {
            name: "bItem4"
        }
        ListElement {
            name: "bItem5"
        }
        ListElement {
            name: "cItem6"
        }
        ListElement {
            name: "cItem7"
        }
        ListElement {
            name: "tItem8"
        }
        ListElement {
            name: "tItem9"
        }
        ListElement {
            name: "tItem10"
        }
        ListElement {
            name: "wItem11"
        }
        ListElement {
            name: "wItem12"
        }
        ListElement {
            name: "wItem13"
        }
        ListElement {
            name: "zItem14"
        }
        ListElement {
            name: "zItem151"
        }
    }
}

以上代码中，不仅实现了model中数据的分组，还通过鼠标滑动到右侧的字母上时自动定位ListView的显示，主要使用了Repeater控件进行分组字母的显示，通过计算鼠标当前在Repeater中的那个字母上，得出ListView中应该展示的索引（这里没有进行详细的计算，只是初步计算，要想精确定位，在这块还得继续优化，请参见下一篇 JS递归调用定位ListView应该定位的项），然后调用ListView的positionViewAtIndex(idx, ListView.Beginning)进行显示的定位，其实现效果如下：

如上图，当鼠标在"c"上时，分组自动定位到C分组，中间的红圆形显示当前显示分组的字母，这样，完美实现了数据的分组显示与定位^_^。

QML中ListView数据的分组与定位显示

猜你喜欢