Animation in ListView



  • How to speed up the animation when changing currentIndex?
    How change currentIndex when scrolling the mouse?

    import QtQuick 2.4
    import QtQuick.Controls 1.2
    
    Rectangle {
        id: rootItem
    
        color: "lightgreen"
    
        ListModel {
            id: lModel
            ListElement {
                color: "red"
            }
            ListElement {
                color: "blue"
            }
            ListElement {
                color: "green"
            }
            ListElement {
                color: "yellow"
            }
            ListElement {
                color: "black"
            }
        }
    
        ListView {
            id: list
            width: parent.width
            height: btnLeft.y - btnLeft.height
            anchors.top: parent.top
            anchors.topMargin: btnLeft.height / 2
            snapMode: ListView.SnapOneItem
            orientation: ListView.Horizontal
    
            model: lModel
            delegate: Rectangle {
                width: rootItem.width
                height: btnLeft.y - btnLeft.height
                color: model.color
            }
        }
    
        Button {
            id: btnLeft
    
            width: parent.width / 3
            height: parent.height * 0.2
            anchors.bottom: parent.bottom
            anchors.bottomMargin: height * 0.2
            anchors.left: parent.left
            anchors.leftMargin: width / 2
            text: "<<"
            onClicked: {
                if (list.currentIndex > 0) {
                    list.currentIndex--
                }
            }
        }
    
        Button {
            id: btnRight
    
            width: parent.width / 3
            height: parent.height * 0.2
            anchors.bottom: parent.bottom
            anchors.bottomMargin: height * 0.2
            anchors.right: parent.right
            anchors.rightMargin: width / 2
            text: ">>"
            onClicked: {
                if (list.currentIndex < 4) {
                    list.currentIndex++
                }
            }
        }
    }
    

  • Moderators

    @Trikrista

    How to speed up the animation when changing currentIndex?

    You can use positionViewAtIndex.

    How change currentIndex when scrolling the mouse?

    Use wheel even to get mouse scroll events. Then you have to find out if it goes up or down. It can be done using wheel.angleDelta.y. Scrolldown will give negative values. Then you have to just increment or decrement currentIndex depending on it.

    MouseArea {
        anchors.fill: parent
        onWheel: console.log(wheel.angleDelta.y)
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.