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

Use scrollbar with listView



  • Hello to all,
    as written in the title, I've got a listView and I need to add a scrollbar for selecting the file of interest. Besides, I have a header in my ListView and I wonder if the scrollBar would affect it, or it handles only the elements.
    Below some code.

            ListView
            {
                id: lista
                anchors.leftMargin: 105
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width
                height: parent.height
    
                model: folderModel
                delegate: fileDelegate
                header: navigation
    
                FolderListModel {
                    id: folderModel
                    folder: "file:" + "/home/davide"
                    nameFilters: ["*.mp3"]
                }
    
                Component{
                    id: navigation
                    RowLayout
                    {
                        Layout.fillWidth: parent
                        spacing: 5
                        Image
                        {
                            id: home
                            sourceSize.width: 64
                            sourceSize.height: 64
                            source:"qrc:/res/icons/Home-icon.png"
                            MouseArea
                            {
                                anchors.fill: parent
                                onReleased: {items.folder = items.rootFolder;}
                            }
                        }
    
                        Image
                        {
                            id: back
                            sourceSize.width: 64
                            sourceSize.height: 64
                            source: "qrc:/res/icons/Back-icon.png"
                            MouseArea
                            {
                                anchors.fill: parent
                                onReleased: {if(items.folder!==items.rootFolder) items.folder=items.parentFolder;}
                            }
                        }           
                    }
                }
    
                Component
                {
                    id: fileDelegate
                    Rectangle
                    {
                        id: listaElemento
                        width: parent.width - 110
                        height: 48
                        color:playArea.pressed?afterPressColor:beforePressColor
                        border.color: "BLACK"
                        border.width: 2
                        radius: 25
                        readonly property color beforePressColor: "LightBlue"
                        readonly property color afterPressColor: "Green"
    
                        RowLayout
                        {
                            Image
                            {
                                id: icon;
                                sourceSize.width: 48
                                sourceSize.height: 48
                                Layout.leftMargin: 15;
                                source: folderModel.isFolder(index) ? "qrc:/res/icons/folder.png" : "qrc:/res/icons/music.png";
                            }
    
                            Text { id: name; text: fileName;
                      }
                }
            }
    

    Thank you.



  • I think I've figure it out. Basically the listView header must be taken out from listview and put it below the list. Scrolling the list, the elements, overcome the header but since the header and footer have higher z values (they are declared after the list), the latter covers the elements. See the example "listview" of Qt examples



  • @davidino ListView has a scroll bar. Just add this to your lista

    ScrollBar.vertical: ScrollBar {}
    


  • Hello @igor_stravinsky,
    thank you for your answer. I added scroolbar this way, but I've got two problems.
    First, when the scrollbar moves up and down the ListView header moves as well, instead of staying still. Do I have to move the ListView header out in a different component?
    Second, when I move the scrollbar the elements goes outside the ListView boundaries. Am I missing something in ListView? The parent of ListView is an Image.

    Thank you again.



  • I think I've figure it out. Basically the listView header must be taken out from listview and put it below the list. Scrolling the list, the elements, overcome the header but since the header and footer have higher z values (they are declared after the list), the latter covers the elements. See the example "listview" of Qt examples


Log in to reply