0

我正在尝试在 QML 中启用快速滚动。我对如何实现这一点有了一些想法，但需要一些帮助...

正如您从下面的代码中看到的那样，我使用了 2 个列表视图：- 一个用于显示联系人，另一个用于显示快速滚动的索引..，在联系人的列表视图中，我也有一个 scrollIndicator..

main.qml包含主要代码，并且包含ContactModel.qml要在联系人中使用的listview联系人列表。

当我尝试进行快速滚动时出现问题......

矩形中的字母bigRect是从联系人中的顶部项目获取的listview...如果您在机器上尝试代码，您会遇到我面临的问题....如何根据联系人更改联系人的 listview 位置字典 listview...我在这一点上感到困惑..任何帮助将不胜感激。

---------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()
}
4

1 回答 1

0

从MouseArea 文档：

默认情况下，MouseArea 项仅报告鼠标点击，而不是鼠标光标位置的变化。设置hoverEnabled属性可确保使用为onPositionChanged、 onEntered 和 onExited 定义的处理程序......

所以你只需要hoverEnabled: true为你的MouseArea, 设置你的onPositionChanged工作。因此onClicked可能不需要处理程序？

MouseArea{
     id: moArea
     anchors.fill: parent
     hoverEnabled: true
     ....
     onPositionChanged: {
     ...
     }
于 2018-06-03T00:47:12.493 回答