QML：如何将滚动条添加到列表视图

Question

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

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

主要的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。如果可以从滚动条移动到滚动视图，则任意列表视图的代码如下所示：

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

        }
    }
}

请注意关键的滚动条。垂直：vbar行，它将滚动条组件vbar分配给列表视图。

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