Why horizontal scroll bar not working on listview qml?

Question

I have used almost all solutions on Stackoverflow to make it work. But none of them worked?

What changes can be done so that horizontal scroll bar work?

I used the qt docs also but still not working. Please give some examples. I just need horizontal scroll in listview. Or other view also.

main.qml

Rectangle {

    id: frame

    width: 300
    height: 300
    anchors.top: meaning.bottom

     ListView {

        width: 300
        height: 300
        anchors.centerIn: parent
        id: myList
        model: myModel
        highlight: highlightBar
        clip: true

        snapMode: ListView.SnapToItem

        headerPositioning: ListView.OverlayHeader

        header: Rectangle {
            id: headerItem
            width: myList.width
            height: 30
            z: 2

            color: "gray"

            Text {
                text: "Simple Text List"
                color: "white"
            }
        }

        delegate: Item {
            id: delegateItem
            width: 400
            height: 20
            Text {
                text: name
            }

            MouseArea {
                id: mArea
                anchors.fill: parent
                onClicked: {
                    myList.currentIndex = index
                }
            }
        }
    }

    Component {
        id: highlightBar
        Rectangle {
            width: parent.width
            height: 20
            color: "#FFFF88"
        }
    }

    ListModel {
        id: myModel   
    }
 
    
        ScrollBar {
        id: vbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }

    ScrollBar {
        id: hbar
        hoverEnabled: true
        active: hovered || pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
} 

Please make change to this so horizontal scroll work. Thanks.

Answer 1

QML ListView is a Flickable subclass.

To show scrollbars in a Flickable you need to provide contentWidth and/or contentHeight and the desired flickableDirection.

Here is an example of a ListView that scrolls both ways:

import QtQuick
import QtQuick.Controls
import QtQuick.Window

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  ListView {
    anchors.fill: parent
    ScrollBar.vertical: ScrollBar {}
    ScrollBar.horizontal: ScrollBar {}
    flickableDirection: Flickable.HorizontalAndVerticalFlick
    contentWidth: 1000
    model: ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua", "ut", "enim", "ad", "minim", "veniam", "quis", "nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat", "duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "fugiat", "nulla", "pariatur", "excepteur", "sint", "occaecat", "cupidatat", "non", "proident", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"]
    delegate: Label {
      width: ListView.view.width
      horizontalAlignment: Text.AlignHCenter
      text: modelData
    }
  }
}