QML：如何将滚动条添加到 ListView

Question

我有一个简单的 ListView 程序，并在其中尝试附加滚动条。向上/向下滚动时列表没有移动，此处列表应相应移动。似乎，我无法正确设置 contentItem。寻找一些提示。

请在下面找到我的示例核心，然后我在 listView.rolesListModel 中添加了一个垂直滚动条是我的模型。

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
Window {
width: 400
height: 300
visible: true

    ListModel
    {
        id:rolesListModel
        ListElement
          {
            t:"One"
        }
        ListElement
                      {
            t:"Two"
        }
        ListElement
        {
            t:"Three"
        }
        ListElement
        {
            t:"Five"
        }
        ListElement
        {
            t:"Six"
        }
        ListElement
        {
            t:"Seven"
        }
        ListElement
        {
            t:"Eight"
        }
        ListElement
        {
            t:"Nine"
        }
        ListElement
        {
            t:"Ten"
        }
    }

    ListView {
        id: listView
        width: 150
        height: 100
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        model: rolesListModel
        clip: true
        delegate: listRect

        ScrollBar {
            id: vbar
            active: true
            orientation: Qt.Vertical
            size: listView.height / listView.contentHeight
            position: listView.currentItem
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }
    Component
    {
        id:listRect
        Rectangle
        {
            id:listElementRect
            height:20
            width: 100
            Text
            {
                id:elementText
                width:parent.width
                height:parent.height
                text:t
                horizontalAlignment: "AlignHCenter"
            }

        }
    }
}

Answer 1

较新的方式

您使用的是旧版本的 QML，QtQuick 现在是 2.14。如果您可以从 ScrollBar 移动到 ScrollView，那么任意 ListView 的代码将如下所示：

import QtQuick 2.14
import QtQuick.Controls 2.14

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ScrollView {
        anchors.fill: parent

        ScrollBar.vertical.policy: ScrollBar.AlwaysOn

        ListView {
            width: parent.width
            model: 20
            delegate: ItemDelegate {
                text: "Item " + (index + 1)
                width: parent.width
            }
        }
    }
}

请注意基本滚动条配置行ScrollBar.vertical.policy: ScrollBar.AlwaysOn

https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html#scroll-bars

---

老办法

但是，如果您想继续编写代码，则解决方法是专门声明垂直滚动条属性绑定到您的滚动条

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    width: 400
    height: 300
    visible: true

    ListModel
    {
        id:rolesListModel
        ListElement
        {
            t:"One"
        }
        ListElement
        {
            t:"Two"
        }
        ListElement
        {
            t:"Three"
        }
        ListElement
        {
            t:"Five"
        }
        ListElement
        {
            t:"Six"
        }
        ListElement
        {
            t:"Seven"
        }
        ListElement
        {
            t:"Eight"
        }
        ListElement
        {
            t:"Nine"
        }
        ListElement
        {
            t:"Ten"
        }
    }

    ListView {
        id: listView
        width: 150
        height: 100
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        model: rolesListModel
        clip: true
        delegate: listRect

        ScrollBar.vertical: vbar

        ScrollBar {
            id: vbar
            active: true
            orientation: Qt.Vertical
            size: listView.height / listView.contentHeight
            position: listView.currentItem
            policy: ScrollBar.AlwaysOn
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }

    Component
    {
        id:listRect
        Rectangle
        {
            id:listElementRect
            height:20
            width: 100
            Text
            {
                id:elementText
                width:parent.width
                height:parent.height
                text:t
                horizontalAlignment: "AlignHCenter"
            }

        }
    }
}

请注意关键的 ScrollBar.vertical: vbar 行，它将您的 ScrollBar 组件 vbar 分配给 ListView。

https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details