QML將ListView滾動一行

我有一個簡單的ListView. 我的目標是使用兩個按鈕將視圖滾動一行。

我嘗試使用ScrollBar.vertical.positionorScrollBar.increase()但我無法一一滾動專案。

這是代碼：

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

uj5u.com熱心網友回復：

由于您知道單行的高度，您可以簡單地手動調整contentYListView 的屬性。

首先，給 ListView 一個 id。

ListView {
   id: lv
   ...
}

然后在按下按鈕時更新 ListView 的 contentY：

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

標籤：qtqml

上一篇：在python中洗掉QTabWidget周圍的邊距

下一篇：無法為動態創建的QML物件測量子級