How to integrate ListView with FolderListModel using QML? - qt

Question

I am developing a file browser interface using QML. However, I find I cannot click any folder and the list covered the top button. I don't know what I did wrongly.
I used ListView and FolderListModel during the development. And I intend to make the interface as below and works like a file browser
The expected interface:
Source Code:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.1
import Qt.labs.folderlistmodel 2.1
import QtMultimedia 5.0
import QtQuick.Controls.Styles 1.4
import Qt.labs.platform 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int index: 0
property bool isActive: true
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1 {
Rectangle {
id:root;
state:"hidden";
color: "#212126";
property string folderPathName: "file:///C:/";
property bool rootPath:false;
signal message(string msg);
property int lineHeight: 90;
signal selectedFolder(string folderPath);
Button{
id:topLine;
text: "...";
width: root.width;
height: root.lineHeight;
onClicked: {
if (folderModel.parentFolder != ""){
root.folderPathName = folderModel.parentFolder;
}
else{
root.state = "hidden";
}
}
}
ListView{
id:listFileView;
anchors{
bottom: rectangleButton.top;
bottomMargin: 4;
right: root.right;
rightMargin: 0;
left: root.left;
leftMargin: 0;
top: topLine.bottom;
topMargin: 0;
}
clip:true;
delegate:Button{
text: fileName;
height:root.lineHeight;
width:root.width;
onClicked: {
if(folderModel.isFolder(index)){
root.folderPathName = folderModel.get(index, "fileURL");
}
}
}
model: FolderListModel{
id:folderModel;
objectName: "folderModel";
showDirs: true;
showFiles: true;
showDirsFirst: true;
nameFilters: ["*.mp3", "*.flac"];
folder:root.folderPathName;
}
}
Rectangle {
id: rectangleButton;
height: 20;
color: "#212126";
anchors{
left: root.left;
leftMargin: 0;
right: root.right;
rightMargin: 0;
bottom: root.bottom;
bottomMargin: 0;
}
Rectangle{
id:rectWhiteLine;
anchors{
left:parent.left;
right: parent.right;
top:parent.top;
}
height: 2;
color:"white";
}
}
}
}
Page {
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("Main")
}
TabButton {
text: qsTr("View")
}
}
}
After changing anchors{ bottom: rectangleButton.top; bottomMargin: 4; right: root.right; rightMargin: 0; left: root.left; leftMargin: 0; top: topLine.bottom; topMargin: 0; } to width: 200; height: 600, the interface turns to be below:
The folders cannot be clicked and they are not correctly aligned.

Answer 1

Maybe this example would be of any use to you.
I have added "back" button that goes up one folder, and buttons that represent folders inside ListView are colored orange.
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
import Qt.labs.folderlistmodel 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: mainRect
x: 20
y: 20
width: 300
height: 450
border.color: "black"
radius: 30
ListView {
y: 30
width: parent.width
height: parent.height - 60
clip: true
model: FolderListModel {
id: folderListModel
showDirsFirst: true
// nameFilters: ["*.mp3", "*.flac"]
}
delegate: Button {
width: parent.width
height: 50
text: fileName
onClicked: {
if (fileIsDir) {
folderListModel.folder = fileURL
}
}
background: Rectangle {
color: fileIsDir ? "orange" : "gray"
border.color: "black"
}
}
}
}
Button {
anchors.left: mainRect.right
anchors.leftMargin: 5
text: "back"
onClicked: folderListModel.folder = folderListModel.parentFolder
}
}
To get clickable top area with "..." I would add Text there and Mouse Area to handle clicks:
Text {
width: parent.width
height: 30
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "..."
MouseArea {
anchors.fill: parent
onClicked: folderListModel.folder = folderListModel.parentFolder
}
}
Add this code inside mainRect i.e. after line radius: 30.