如何在QML

Question

当您转到iPhone上的联系人时，右侧有一个索引列表，其中包含从A到＃的字母表。它是可点击的，你可以在它上面滑动。我想在我的项目中有类似的东西，但没有什么我能找到如何实现它。有人可以指导我。

我做了一些关于如何完成这项任务的研究。以下是我正在使用的代码。

    ListView{
        id: cView
        width: 300
        height: 300
        model: CModel{}
        clip: true
        delegate: cDelegate
        visible: false
        section {
            property: "name"
            criteria: ViewSection.FirstCharacter
        }
        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            Rectangle {
                id: bigRect
                visible: scrollBar.pressed
                color: "#1976D2"
                width: 96
                height: width
                radius: width/2
                x: -width - 16
                y: Math.max(scrollBar.position * scrollBar.height - height, 0)  // Not so sure about this formula yet.
                z:4
                Rectangle {
                    width: parent.width/2
                    height: parent.height/2
                    x: width
                    y: height
                    color: parent.color
                }
                Label {
                    anchors.centerIn: parent
                    color: "White"
                    font.bold: true
                    font.pixelSize: 40
                    property Item topItem: cView.itemAt(0, cView.contentY)
                    property Item topItemFix: topItem ? topItem: cView.contentItem.children[0]
                    text: topItemFix.ListView.section
                }
            }

        }
    }

CModel {}是一个单独的QML文件，我用于模型数据。每个ListElement都只有与之关联的名称。

cDelegate适用于ListView也可以正常工作......我遇到了这个代码的一个问题..当我向下滚动ScrollBar时，bigRect中的文本没有改变..它只是显示＆＃34 ; A＆＃34 ;.在滚动时，此文本也不会改变。它必须与最后一个语句文本有关：topItemFix.ListView.section但我无法看到任何内容。

虽然这不是我想要做的......但是在完成之后我就可以努力做到最后。

以下是cDelegate的代码。

    Component{
        id: cDelegate
        Rectangle{
            id: anItemz
            width: ListView.view.width
            color: "#f8f8f8"
            height: 74
            x: 70
            y: 90

            Text {
                text: name
                x:24
                y:20
                width: 199
                height: 40
                font.family: 'Helvetica Neue'
                font.pixelSize: 28
            }
    }

}

CModel.qml文件如下所示---------

import QtQuick 2.10
import QtQuick.Window 2.10

ListModel{
    id: contacts
ListElement{
    name: "abc"
}
ListElement{
    name: "def"
}
.
.
.
.
.
}