Как иметь словарный фильтр в QML - PullRequest
Новая
       24

Как иметь словарный фильтр в QML

0 голосов
/ 14 мая 2018

Когда вы идете в Контакты на вашем 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 не меняется .. Он просто отображает "A" , При прокрутке этот текст также не изменяется. Это должно быть связано с последним текстом оператора: 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"
}
.
.
.
.
.
}
...