qtlistviewqml

QML: Attach scrollbar to ListView


I'm having an issue with ListView. ListView is too long and part of it appears outside of the window but I can't attach a scrollbar. I tried many different combination. I think that problem lies in height parameter but if remove it ListView displays only first entry.

Column{
    anchors.fill: parent
    Row{
        id: buttonsRow
            Button{
                text: "Open dump file"
                onClicked: fileDialog.visible = true
            }
            Button{
                text: "Copy raw data to clipboard"
            }
    }
    ListView{
        id: listView
        anchors.top: buttonsRow.bottom
        height: contentHeight
        //clip: true
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        interactive: true
        model: ListModel{
            id: listModel
        }
        delegate: MDelegate{}
    }
}

Is there any way to make it scrollable?


Solution

  • Setting height to contentHeight is probably the issue. That would make the ListView as high as all of its item's heights combined. The scrollbar only works when the height of the view is less than the height of its contents.

    Here's an approach that uses layouts instead:

    import QtQuick 2.8
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.3
    
    ApplicationWindow {
        width: 400
        height: 300
        visible: true
    
        ColumnLayout {
            anchors.fill: parent
    
            RowLayout {
                id: buttonsRow
                Button {
                    text: "Open dump file"
                }
                Button {
                    text: "Copy raw data to clipboard"
                }
            }
    
            ListView {
                id: listView
                flickableDirection: Flickable.VerticalFlick
                boundsBehavior: Flickable.StopAtBounds
                model: 100
                clip: true
                delegate: ItemDelegate {
                    text: modelData
                }
    
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                ScrollBar.vertical: ScrollBar {}
            }
        }
    }