Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to scroll ListView from code in QML



  • Hi!
    How to scroll ListView from code in QML?



  • its work:

    import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.0
    
    Window {
        id: demo
        width: 800
        height: 600
        visible: true
        color: "#ff303030"
    
        property color accentColor: "#ff00b374"
    
        Rectangle {
            width: parent.width/2-32
            height: parent.height-32
            x: 16
            y: 16
    
            color: accentColor
            clip: true
            ListView {
                id: listView
                width: parent.width
                height: parent.height
    
                // When scroll end align to the nearest item
                snapMode: ListView.SnapToItem
                // Clip painting to his own bounding rectangle to avoid display
                // data outside specified size during flick
                clip: true
                model: 100
    
                // Increase Flick speed
                maximumFlickVelocity: 10000
                cacheBuffer:1000
    
                ScrollBar.vertical: ScrollBar {
                    id: verticalScrollBar
                    active: pressed || listView.moving || listUp.pressed || listDown.pressed
                    orientation: Qt.Vertical
                    opacity: active ? 1:0
                    Behavior on opacity {NumberAnimation {duration: 500}}
    
                    contentItem: Rectangle {
                        implicitWidth: 4
                        radius:2
                        implicitHeight: parent.height
                        color: accentColor
                    }
                }
    
                delegate: Rectangle {
                    id: lineRectangle
                    height: 32
                    width: listView.width
    
                    // Change color based on index number for better readability
                    color: (index & 1)? "#ffefefef" : "#ffffffff"
    
                    Text {
                        id: textField
                        height: parent.height
                        width: parent.width
                        color: listView.currentIndex === index? accentColor:"#ff000000"
                        font.pixelSize: 16
                        horizontalAlignment : Text.AlignHCenter
                        text: "Element " + (index+1)
                    }
                }
            }
        }
    
        // Up Button to move list up
        Rectangle {
            id: upButton
    
            height: 256
            width: height//parent.width
            radius: height/2
    
            x: parent.width*3/4-width/2
            y: parent.height*1/4-height/2
    
            color: "#ffffffff"
    
            Text {
                text: "Up"
                anchors.centerIn: parent
                color: listUp.pressed? demo.accentColor: "#ff000000"
                font.pixelSize: 64
            }
    
            MouseArea {
                anchors.fill: parent
                id: listUp
    
                SmoothedAnimation {
                    target: listView
                    property: "contentY"
                    running: listUp.pressed
                    velocity: 1000
                    to: 0
                }
                onReleased: {
                    if (!listView.atYBeginning)
                        listView.flick(0, 1000)
                }
            }
        }
    
        // Down Button to move list down
        Rectangle {
            id: downButton
            height: upButton.height
            width: upButton.width
            radius: upButton.radius
            color: upButton.color
    
            x: parent.width*3/4-width/2
            y: parent.height*3/4-height/2
    
            Text {
                text: "Down"
                anchors.centerIn: parent
                color: listDown.pressed? demo.accentColor: "#ff000000"
                font.pixelSize: 64
            }
    
            MouseArea {
                anchors.fill: parent
                id: listDown
    
                SmoothedAnimation {
                    target: listView
                    property: "contentY"
                    running: listDown.pressed
                    to: listView.contentHeight - listView.height
                    velocity: 1000
                }
                onReleased: {
                    if (!listView.atYEnd)
                        listView.flick(0, -1000)
                }
            }
        }
    }
    
    

Log in to reply