Solved 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