原文参考http://www.cnblogs.com/listensong/p/4202039.html
相关的知识点先说一下,其实没什么,就ListView的应用,然后目录的信息通过导入包
import Qt.labs.folderlistmodel 2.1
效果如图:
分为三部分:返回父目录,当前目录显示,下面的分隔部分.
自定义一个组件,方便调用
import QtQuick 2.0
Rectangle{
id:rec;
implicitWidth:100;
implicitHeight: 50;
property alias text: text.text;
property alias fontSize: text.font.pixelSize;
property alias source: img.source;
property bool selectable
property bool isdir
property alias area: area
color: "#212126";
Image{
id:img;
width: 60;
height: 45;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.margins: 10;
fillMode: Image.PreserveAspectCrop //deng bi suo fang
clip:true //limits area
}
MouseArea{
id:area
anchors.fill:parent;
onClicked: {
console.log("zidingyi clicked");
}
}
Rectangle{
anchors{
top:img.bottom;
left:parent.left;
right:parent.right;
margins: 10;
}
height:2;
color:"lightgrey";
}
Text{
id:text;
anchors.left: img.right;
anchors.verticalCenter: img.verticalCenter;
color:"white";
}
}
然后是main.qml
import QtQuick 2.3
import Qt.labs.folderlistmodel 2.1
import QtQuick.Controls 1.2
import QtQuick.Window 2.0
import "./wuyu"
Window{
width: Screen.width;
height:Screen.height;
visible: true;
property string folderPathName: "file:///home/rootor";
property int lineHeight: 90;
Rectangle {
id:root;
anchors.fill: parent;
state:"hidden";
color: "#212126";
LineStyle{
id:topLine;
text: "...";
width: root.width;
height: lineHeight;
fontSize:40;
source: "return.png";
area.onClicked: {
if (folderModel.parentFolder != ""){
folderPathName = folderModel.parentFolder;
}
else{
root.state = "hidden";
}
// console.log("topLine root.folderPathName:", folderPathName);
// console.log("\n folderModel.folder:", folderModel.folder,
// "\n folderModel.parentFolder:", folderModel.parentFolder,
// "\n folderModel.rootFolder:", folderModel.rootFolder);
}
}
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:LineStyle{
text: fileName;
height:lineHeight;
width:root.width;
fontSize:35;
source: folderModel.get(index, "fileIsDir")?"folder.png":"file.png";
isdir: folderModel.get(index, "fileIsDir")?true:false;
area.onClicked: {
// console.log("\nlistFileView onClicked F:", folderModel.folder,
// "\n folderModel.parentFolder:", folderModel.parentFolder,
// "\n folderModel.rootFolder:", folderModel.rootFolder,
// "\n folderModel.isFolder:", folderModel.isFolder(index));
// console.log("\n fileName:", folderModel.get(index, "fileName"),
// "\n filePath:", folderModel.get(index, "filePath"),
// "\n fileURL:", folderModel.get(index, "fileURL"),
// "\n fileBaseName:", folderModel.get(index, "fileBaseName"),
// "\n fileSuffix:", folderModel.get(index, "fileSuffix"),
// "\n fileSize:", folderModel.get(index, "fileSize"),
// "\n fileModified:", folderModel.get(index, "fileModified"),
// "\n fileAccessed:", folderModel.get(index, "fileAccessed"),
// "\n fileIsDir:", folderModel.get(index, "fileIsDir"));
if(folderModel.isFolder(index)){
folderPathName = folderModel.get(index, "fileURL");
}
}
}
model: FolderListModel{
id:folderModel;
objectName: "folderModel";
showDirs: true;
showFiles: true;
showDirsFirst: true;
//nameFilters: ["*.mp3", "*.flac"];
folder:folderPathName;
onFolderChanged: {
console.log("onFolderChanged root.folderPathName:", folderPathName);
console.log("\n folderModel.folder:", folderModel.folder,
"\n folderModel.parentFolder:", folderModel.parentFolder,
"\n folderModel.rootFolder:", folderModel.rootFolder);
}
}
}
Rectangle {
id: rectangleButton;
height: lineHeight;
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";
}
}
}
}
目前还存在的一个问题是在变动页面时文字会莫名其妙的丢失,最大化窗口后文字又会显示出来.找不出来原因.