QML scroll ListView by one row - qt

Question

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"
}
}
}
}

Answer 1

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