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

---

较旧的方式

但是，如果您想继续执行代码，则解决方法是专门声明将vertical scrollbar属性绑定到您的滚动条

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