如何实现QML ListView通过按钮逐行滚动？

要实现ListView的逐行滚动，直接操作ScrollBar的position或increase()方法并不合适——这些方法基于滚动区域的比例值计算，和列表项的高度没有直接关联，自然没法精准控制逐行滚动。

正确的做法是利用ListView自身的API来控制：

• 给ListView设置id，方便后续引用
• 通过currentIndex控制当前选中项，结合positionViewAtIndex()方法让视图滚动到指定项的位置
• 或者直接调整contentY属性，每次增减一个列表项的高度（需注意边界限制）

以下是修改后的完整代码：

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 {
            id: listView // 添加id用于引用
            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"
                onClicked: {
                    // 方式1：通过currentIndex控制，同步高亮并滚动到项顶部
                    if (listView.currentIndex > 0) {
                        listView.currentIndex--;
                        listView.positionViewAtIndex(listView.currentIndex, ListView.Beginning);
                    }
                    // 方式2：直接修改contentY，无需高亮时可用
                    // listView.contentY = Math.max(listView.contentY - 40, 0);
                }
            }
            Button {
                width: 150
                height: 40
                text: "Scroll Down"
                onClicked: {
                    // 方式1：通过currentIndex控制
                    if (listView.currentIndex < contactModel.count - 1) {
                        listView.currentIndex++;
                        listView.positionViewAtIndex(listView.currentIndex, ListView.Beginning);
                    }
                    // 方式2：直接修改contentY
                    // listView.contentY = Math.min(listView.contentY + 40, listView.contentHeight - listView.height);
                }
            }
        }
    }
}

两种实现方式说明： #

1. currentIndex + positionViewAtIndex：同步选中项的高亮效果，自动处理滚动边界，确保项完整显示在视图内，适合需要高亮当前项的场景。
2. 直接修改contentY：操作更直接，无需依赖currentIndex，适合不需要高亮选中项的场景，需手动限制contentY范围（不能小于0，也不能超过内容高度减去视图高度）。

内容的提问来源于stack exchange，提问作者Andrea Ricchi