QML - 小例子 - 文件目录浏览器

 

QML - 小例子 - 文件目录浏览器

 

QML写动画比较方便，参考QML提供的例子写了如下在Android上可用的文件目录浏览器(电脑端其实也可用，只是还不完整)

 

以上这两张截图是在电脑上直接运行时的样子，在Android手机上运行的话，会有一些小差异。

FileListView.xml的代码大概如下：

import QtQuick 2.3
import Qt.labs.folderlistmodel 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 1.2

Rectangle {
    id:root;
    state:"hidden";
    color: "#212126";

    property string folderPathName: "file:///H:/TTPmusic/";
    property bool rootPath:false;
    signal message(string msg);
    property int lineHeight: 90;
    signal selectedFolder(string folderPath);

    LineStyle{
        id:topLine;
        text: "...";
        width: root.width;
        height: root.lineHeight;
        fontSize:40;
        selectable:false;
        source: "res/image/arrow-1-backward.png";
        onClicked: {
            console.log("topLine  onClicked");
            if (folderModel.parentFolder != ""){
                root.folderPathName = folderModel.parentFolder;
                //text = root.folderPathName.slice(8);
            }
            else{
                //Fns.set_path_result(0);
                root.state = "hidden";
            }

            console.log("topLine root.folderPathName:", root.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:root.lineHeight;
            width:root.width;
            fontSize:35;
            source: folderModel.get(index, "fileIsDir")?"res/image/folder.png":"";
            selectable:folderModel.get(index, "fileIsDir")?false:true;
            isdir: folderModel.get(index, "fileIsDir")?true:false;
            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)){
                    root.folderPathName = folderModel.get(index, "fileURL");
                }
            }
            onSelectfile: {
                //add_song_to_list!
                console.log("onSelectfile: ", folderModel.get(index, "fileURL"));
            }
        }
        model: FolderListModel{
            id:folderModel;
            objectName: "folderModel";
            showDirs: true;
            showFiles: true;
            showDirsFirst: true;
            nameFilters: ["*.mp3", "*.flac"];
            folder:root.folderPathName;
            onFolderChanged: {
                console.log("onFolderChanged root.folderPathName:", root.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";
        }
    }
}

 

 

留此备忘。