文件浏览器

原文参考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";
            }
        }
    }
}

目前还存在的一个问题是在变动页面时文字会莫名其妙的丢失,最大化窗口后文字又会显示出来.找不出来原因.