Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Horizontal ScrollBar not scrolling content in ListView



  • For the life of me I cannot make heads or tails of this:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        id: window
    
        visible: true
        width: 640
        height: 480
        title: qsTr("ListView Horizontal ScrollBar DelegateChooser")
    
        ListModel {
            id: listmodel
    
            ListElement {type:"one"; datas:"123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"}
            ListElement {type:"two"; datas:"123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"}
        }
    
        ListView {
            width: parent.width/4
            height: parent.height
    
            clip: true
            spacing: 1
    
            delegate: Rectangle {
                width: window.width
                height: 20
                color: "darkred"
                border.color: "red"
                border.width: 1
    
                Text {
                    text: datas
                    color: "white"
                }
            }
    
            model: listmodel
    
            ScrollBar.horizontal: ScrollBar{}
        }
    }
    

    The delegate item is wider than the ListView itself. Shouldn't the scrollbar the delegate being shown?



  • Add this to scroll:

    ScrollBar.vertical: ScrollBar {}
        ScrollBar.horizontal: ScrollBar {
            id: horizscrollbar
        }
    

    Also needs contentWidth to be set to largest contentItem. Found that to be tricky and didn't always work:

                       onCountChanged: {
                            var maxwidth = 0
                            for(var ind=0; ind<count; ++ind){
                                var item = itemAtIndex(ind)
                                if(item.width > maxwidth)
                                    maxwidth = item.width
                            }
                            contentWidth = maxwidth
    
                            console.log(contentWidth)
                        }
    

Log in to reply