Use scrollbar with listView

[davidino]

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.

[davidino]

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

[igor_stravinsky]

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

ScrollBar.vertical: ScrollBar {}

[davidino]

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.

[davidino]

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