在 QML 中启用快速滚动

Question

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

从下面的代码中可以看出，我正在使用 2 个列表视图：- 一个用于显示联系人，另一个用于显示用于快速滚动的索引..，在联系人的列表视图中，我也有一个滚动指示器。

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

Answer 1

来自MouseArea文档：

默认情况下，"鼠标区域"项仅报告鼠标单击，而不报告更改 到鼠标光标的位置。设置悬停启用属性 确保为onPositionChanged、onEntered和 使用

退出...

因此，您只需要为您的MouseArea设置hoverEnabled: true，即可使您的onPositionChanged正常工作。 因此可能不需要onClicked处理程序？

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