I have a simple ListView. My goal is to use two buttons to scroll the view by one row.

I tried with ScrollBar.vertical.position or ScrollBar.increase() but I'm not able to scroll items one by one.

This is the code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.VirtualKeyboard 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true

    ListModel {
        id: contactModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Gollum"
            number: "555 3473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Gollum"
            number: "555 3473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Gollum"
            number: "555 3473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Gollum"
            number: "555 3473"
        }
    }

    Component {
        id: contactDelegate
        Item {
            width: window.width
            height: 40
            Column {
                Text {
                    text: '<b>Name:</b> '   name
                }
                Text {
                    text: '<b>Number:</b> '   number
                }
            }
            Rectangle {
                width: parent.width
                height: 1
                color: "black"
            }
        }
    }

    Column {
        anchors.fill: parent
        spacing: 10

        ListView {
            width: parent.width
            height: parent.height - 80
            model: contactModel
            delegate: contactDelegate
            clip: true
            highlight: Rectangle {
                color: "lightsteelblue"
                radius: 5
            }
            ScrollBar.vertical: ScrollBar {
                snapMode: ScrollBar.SnapAlways
                policy: ScrollBar.AlwaysOn
            }
            focus: true
        }

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10
            Button {
                width: 150
                height: 40
                text: "Scroll UP"
            }
            Button {
                width: 150
                height: 40
                text: "Scroll Down"
            }
        }
    }
}

CodePudding user response：

Since you know the height of a single row, you can simply manually adjust the contentY property of the ListView.

First, give the ListView an id.

ListView {
   id: lv
   ...
}

Then update the contentY of your ListView whenever the Buttons are pressed:

Button {
    width: 150
    height: 40
    text: "Scroll UP"
    onClicked: {
        lv.contentY -= 40
    }
}
Button {
    width: 150
    height: 40
    text: "Scroll Down"
    onClicked: {
        lv.contentY  = 40
    }
}