如何在Ubuntu手机上实现一个FileDialog

前一段时间，有个开发者问我能否在Ubuntu手机中使用QtQuick.Dialogs来实现FileDialog。目前在手机上没有Qt这个库的实现。最主要的原因是它不使用unit grid的方式来布局，所以在真的手机上显得非常小。那么我们怎么才能实现同样的功能呢？

 

我们首先来查看一下我们的Ubuntu Qt所提供的API Dialog。这里我们有提供一个Dialog的control.我们可以仿照上面的例程来写出我们所需要的例程。另外，我们也需要使用另外一个API FileFolderList。通过这个API我们可以得到我们所需要的文件的目录的所有的文件：

 

通过对这两个API的了解和和使用，我们可以很快的做出如下的测试应用：

 

 

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.Popups 0.1
import Qt.labs.folderlistmodel 2.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "filedialog.ubuntu"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(75)

    Page {
        title: i18n.tr("Simple")

        Button {
            id: launcher
            text: i18n.tr("Open")
            width: units.gu(16)
            onClicked: PopupUtils.open(dialog, null)
        }

        Component {
            id: dialog
            Dialog {
                id: dialogue

                title: "FileList Dialog"
                text: "Show the files"

                ListView {
                    id: listview
                    width: parent.width
                    height: 200

                    FolderListModel {
                        id: folderModel
                        nameFilters: ["*.qml"]

                        function getFileName(idx) {
                             return (idx >= 0 && idx < count) ? get(idx).fileName: ""
                        }
                    }

                    Component {
                        id: fileDelegate
                        Text {
                            id: text
                            text: fileName
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    console.log("it is clicked");
                                    listview.currentIndex = index;
                                }
                            }
                        }
                    }

                    // Define a highlight with customized movement between items.
                    Component {
                        id: highlightBar
                        Rectangle {
                            width: fileDelegate.width; height: 50
                            color: "red"
                            y: listview.currentItem.y;
                            Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
                        }
                    }

                    focus: true
                    model: folderModel
                    delegate: fileDelegate
                    highlight: highlightBar

                }

                Row {
                    id: row
                    width: parent.width
                    spacing: units.gu(1)
                    Button {
                        width: parent.width/2
                        text: "Cancel"
                        onClicked: PopupUtils.close(dialogue)
                    }

                    Button {
                        width: parent.width/2
                        text: "Confirm"
                        color: UbuntuColors.green
                        onClicked: {
                            console.log("caller: " + dialogue.caller);
                            console.log("currentIndex: " + listview.currentIndex);
                            console.log(folderModel.get(listview.currentIndex, "fileName"));
                            launcher.update();
                            PopupUtils.close(dialogue)
                        }
                    }
                }
            }
        }
    }
}

运行我们的应用，我们可以看到：

 

 

  

 

在这里必须指出的是，Fi