前一段时间,有个开发者问我能否在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