QML: how to add scrollbar into ListView

Question

I have a simple ListView program and therein trying to attach scrollbar. There is no movement on list while scrolling up/ down, here, list should be moving accordingly. Seems, I am not able to set contentItem correctly. Looking for some hints.

Please find my sample core below, thereupon I added a vertical scrollbar to listView.rolesListModel is my model.

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

        }
    }
}

Kenn Sebesta Kenn Sebesta · Accepted Answer · 2019-12-30T21:05:00

Newer way

You're using an older version of QML, QtQuick is now at 2.14. If you were okay moving from ScrollBar to a ScrollView, then the code for an arbitrary ListView would look like this:

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

Please note the essential scrollbar configuration line ScrollBar.vertical.policy: ScrollBar.AlwaysOn

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

Older way

If, however, you would like to continue with your code, then the fix is to specifically declare that the vertical scrollbar property is bound to your 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"
            }

        }
    }
}

Please note the crucial ScrollBar.vertical: vbar line, which assigns your ScrollBar component vbar to the ListView.

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

QML: how to add scrollbar into ListView

1 Answers

Newer way

Older way