QML: how to add scrollbar into ListView - qt

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

Answer 1

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