Fatal编程技术网
  • qt/
  • Qt 在QML中启用快速滚动

Qt 在QML中启用快速滚动

qt listview qml

Qt 在QML中启用快速滚动,qt,listview,qml,fastscroll,mousearea,Qt,Listview,Qml,Fastscroll,Mousearea,我正在尝试在QML中启用快速滚动。。我对如何实现这一目标有些想法，但需要一些帮助 从下面的代码可以看出，我使用了两个列表视图：-一个用于显示联系人，另一个用于显示快速滚动的索引..，在联系人的列表视图中，我还有一个滚动指示器 main.qml包含主代码，而ContactModel.qml包含要在listview中用于联系人的联系人列表 当我尝试做快速滚动时，问题出现了 bigRect矩形中的字母表是从contactslistview中的顶部项目获取的。。。如果您在您的机器上尝试该代码，您将遇到我

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

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

main.qml
包含主代码，而
ContactModel.qml
包含要在
listview
中用于联系人的联系人列表

当我尝试做快速滚动时，问题出现了

bigRect
矩形中的字母表是从contacts
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
        }
    }

}

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

导入QtQuick 2.10
导入QtQuick.Window 2.10
导入QtQuick.Controls 2.2
导入QtQuick.Layouts 1.1
窗口{
可见：正确
宽度：960
身高：540
列表视图{
id:contactView
宽度：383
身高：360
x:158
y:85
模型：ContactModel{}
剪辑：对
代表：联系人代表
可见：正确
ScrollIndicator.vertical：滚动指示器{
id:aScroll
}
部分{
属性：“名称”
条件：ViewSection.FirstCharacter
}
}
函数appendtodictModel（）{
对于（变量i=1；i
----------------ContactModel.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
        }
    }

}

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

导入QtQuick 2.10
导入QtQuick.Window 2.10
列表模型{
id:联系人
李斯特伦{
名称：“阿丹古拉”
}
李斯特伦{
名称：“亚历山大阿尔芒”
}
李斯特伦{
姓名：“奥德拉·范诺曼”
}
李斯特伦{
姓名：“阿什利·特里”
}
李斯特伦{
名称：“Ashly Euler”
}
李斯特伦{
姓名：“阿琳·德雷珀”
}
李斯特伦{
名称：“Aellye Wiest”
}
李斯特伦{
姓名：“布里吉特·德尔克”
}
李斯特伦{
姓名：“Breanna Rotenberry”
}
李斯特伦{
姓名：“布兰达·梅尔戈扎”
}
李斯特伦{
名称：“比比弗雷尔”
}
李斯特伦{
姓名：“布鲁诺·拉索”
}
李斯特伦{
姓名：“Celina Bichrest”
}
李斯特伦{
名称：“Carrol Dedeaux”
}
李斯特伦{
姓名：“Ca