Enabling FastScroll in QML

Question

I am trying to enable the fastscroll in QML.. I have got some idea on how to accomplish that but need some help...

As you can see from the code below, I am using 2 listviews :- one for displaying contacts and the other to display the indexes for fastscrolling.., In the listview for contacts I have a scrollIndicator as well..

The main.qml contains the main code and the ContactModel.qml contains the list of contacts to be used in the listview for contacts..

The problem arises when I try to do the fastscroll...

The alphabet in the bigRect rectangle is acquired from the top item in the contacts listview... If you try the code on your machine you will encounter the problem that I am facing.... How do I change the position of the contacts listview based on the dictionary listview... I am getting confused at this point.. Any help will be greatly appreciated.

---------main.qml-----------------------

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 960
    height: 540

    ListView{
        id: contactView
        width: 383
        height: 360
        x: 158
        y:85
        model: ContactModel{}
        clip: true
        delegate: contactDelegate
        visible: true

        ScrollIndicator.vertical: ScrollIndicator{
        id: aScroll
        }

        section {
            property: "name"
            criteria: ViewSection.FirstCharacter
        }


    }


    function appendtodictModel(){

        for(var i = 1; i < contactView.count-1 ; i++){
            if(contactView.model.get(i).name[0] !== contactView.model.get(i-1).name[0]){
                dictModel.append({name: contactView.model.get(i-1).name[0]});
            }
        }
            dictModel.append({name: contactView.model.get(i).name[0]});
    }

    Component.onCompleted: appendtodictModel()


    Component{
        id: contactDelegate

        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
            }
    }
} // end contactDelegate



    ListModel{
        id: dictModel
    }

    ListView{
        id: dictionary
        x:120
        visible: true
        y:82
        interactive: false
        height: 344
        width: 74
        model: dictModel


        delegate: Text {
            id: blabla
            text: name
            anchors.horizontalCenter: parent.horizontalCenter
            height: 14 //random height.. need to adjust for size later.
            width: 10
            MouseArea{
                id: moArea
                anchors.fill: parent

                onPressed: {
                    bigRect.visible = true
                    bigRect.y = mapToGlobal(mouse.x,mouse.y).y - 150
                    dictionary.currentIndex = index
                }

                onReleased: {
                    bigRect.visible = false

                }

                onPositionChanged: {
                    bigRect.y = mapToGlobal(mouse.x,mouse.y).y - 150
                    dictionary.currentIndex = index
                    console.log(dictModel.get(dictionary.currentIndex).name)

                    for(var j = 1; j < contactView.count-1 ; j++){
                        if(contactView.model.get(j).name[0] === dictModel.get(dictionary.currentIndex).name){
                             contactView.positionViewAtIndex(j, ListView.End)
                        }
                    }

                }

                onClicked: {
                    dictionary.currentIndex = index
                    for(var i = 1; i < contactView.count-1 ; i++){
                        if(contactView.model.get(i).name[0] === dictModel.get(dictionary.currentIndex).name){
                             contactView.positionViewAtIndex(i, ListView.End)
                        }
                    }
                  } // Playing around to see behavior

                onPressAndHold:{
                }

            } // end moArea

        }//end blabla

    }//end dictionary

    Rectangle{
        id: bigRect
        visible: false
        width: 80
        height: width
        radius: width/2
        x: 183

        color: "#1976D2"

        Rectangle {
            width: parent.width/2
            height: parent.height/2
            //x: width
            y: height
            color: parent.color
        }
        Label {
            id: aLabel
            anchors.centerIn: parent
            color: "White"
            font.bold: true
            font.pixelSize: 30
            property Item topItem: contactView.itemAt(158, contactView.contentY)
            property Item topItemFix: topItem ? topItem: contactView.contentItem.children[0]
            text: topItemFix.ListView.section
        }
    }

}

----------------ContactModel.qml-------------------

import QtQuick 2.10
import QtQuick.Window 2.10

ListModel{
    id: contacts
ListElement{
    name: "Adan Gula"
}
ListElement{
    name: "Alexandria Armand"
}
ListElement{
    name: "Audra Vannorman"
}
ListElement{
    name: "Ashleigh Terry"
}
ListElement{
    name: "Ashely Euler"
}
ListElement{
    name: "Arlene Drapeau"
}
ListElement{
    name: "Aellye Wiest"
}
ListElement{
    name: "Brigette Delk"
}
ListElement{
    name: "Breanna Rotenberry"
}
ListElement{
    name: "Branda Melgoza"
}
ListElement{
    name: "Bibi Fraire"
}
ListElement{
    name: "Bruno Raso"
}
ListElement{
    name: "Celina Bichrest"
}
ListElement{
    name: "Carrol Dedeaux"
}
ListElement{
    name: "Calandra Dudney"
}
ListElement{
    name: "Cornell Fierros"
}
ListElement{
    name: "Coretta Stillwell"
}
ListElement{
    name: "Coreen Dehner"
}
ListElement{
    name: "Corazon Burrus"
}
ListElement{
    name: "Charise Milan"
}
ListElement{
    name: "Celsa Moen"
}
ListElement{
    name: "Celinda Frutos"
}
ListElement{
    name: "Cymberly Moodie"
}
ListElement{
    name: "Don Thill"
}
ListElement{
    name: "Divina Fahie"
}
ListElement{
    name: "Dimple Harig"
}
ListElement{
    name: "Desiree Marcano"
}
ListElement{
    name: "Demetrice Mcclaren"
}
ListElement{
    name: "Deedee Ruggerio"
}
ListElement{
    name: "Estela Alverson"
}
ListElement{
    name: "Eufemia Sheely"
}
ListElement{
    name: "Ervin Bardsley"
}
ListElement{
    name: "Elsie Raulerson"
}
ListElement{
    name: "Elmo Routh"
}
ListElement{
    name: "Ellena Fredrick"
}
ListElement{
    name: "Fred Ralphs"
}
ListElement{
    name: "Fawn Opie"
}
ListElement{
    name: "Guy Sondag"
}
ListElement{
    name: "Glady Peguero"
}
ListElement{
    name: "Gilda Doyel"
}
ListElement{
    name: "Gianna Shears"
}
ListElement{
    name: "Gerri Aden"
}
ListElement{
    name: "Genna Quin"
}
ListElement{
    name: "Genevie Spires"
}
ListElement{
    name: "Hiroko Mccarley"
}
ListElement{
    name: "Hilda Hamm"
}
ListElement{
    name: "Herschel Flowers"
}
ListElement{
    name: "Iaris Ruff"
}
ListElement{
    name: "Janelle Broman"
}
ListElement{
    name: "Jacquelyne Worsley"
}
ListElement{
    name: "Jacqualine Twiss"
}
ListElement{
    name: "Jackeline Millington"
}
ListElement{
    name: "Kymberly Moodie"
}
ListElement{
    name: "Kristie Jules"
}
ListElement{
    name: "Kellye Wiest"
}
ListElement{
    name: "Lyndia Schwalm"
}
ListElement{
    name: "Latesha Netter"
}
ListElement{
    name: "Meghan Burts"
}
ListElement{
    name: "Maris Ruff"
}
ListElement{
    name: "Marcelino Spence"
}
ListElement{
    name: "Mable Marron"
}
ListElement{
    name: "Myong Bale"
}
ListElement{
    name: "Nannie Poore"
}
ListElement{
    name: "Noella Gledhill"
}
ListElement{
    name: "Ofelia Bane"
}
ListElement{
    name: "Oatesha Netter"
}
ListElement{
    name: "Phoebe Bui"
}
ListElement{
    name: "Pristie Jules"
}
ListElement{
    name: "Qable Marron"
}
ListElement{
    name: "Quincy Sweeting"
}
ListElement{
    name: "Roselee Swain"
}
ListElement{
    name: "Rikki Gilligan"
}
ListElement{
    name: "Ressie Helt"
}
ListElement{
    name: "Raymundo Headlee"
}
ListElement{
    name: "Raguel Ross"
}
ListElement{
    name: "Stephine Dimauro"
}
ListElement{
    name: "Shanda Ballew"
}
ListElement{
    name: "Tova Kiel"
}
ListElement{
    name: "Tiesha Crumley"
}
ListElement{
    name: "Temple Mcbain"
}
ListElement{
    name: "Tamesha Roop"
}
ListElement{
    name: "Ueghan Burts"
}
ListElement{
    name: "Vyndia Schwalm"
}
ListElement{
    name: "Winter Furrow"
}
ListElement{
    name: "Winfred High"
}
ListElement{
    name: "Willodean Ferguson"
}
ListElement{
    name: "Wade Fossum"
}
ListElement{
    name: "Yvone Edge"
}
ListElement{
    name: "yong Bale"
}
ListElement{
    name: "Zarcelino Spence"
}


function sortModel(){
    var swapped;
    do{
        swapped = false;
        for(var i=0; i<count-1;i++){
            if(get(i).name.localeCompare(get(i+1).name) > 0 ){
                var temp = get(i).name;
                get(i).name = get(i+1).name;
                get(i+1).name = temp;
                swapped = true;
            }
        }
    } while (swapped);


}
Component.onCompleted: sortModel()
}

Answer 1

From MouseArea documentation:

By default, MouseArea items only report mouse clicks and not changes to the position of the mouse cursor. Setting the hoverEnabled property ensures that handlers defined for onPositionChanged, onEntered and onExited are used ...

So you only need to set hoverEnabled: true for your MouseArea, to get your onPositionChanged working. the onClicked handler may thus not be needed?

MouseArea{
     id: moArea
     anchors.fill: parent
     hoverEnabled: true
     ....
     onPositionChanged: {
     ...
     }