当前位置 博文首页 > 诺谦:21.Quick QML-FileDialog、FolderDialog对话框
1.FileDialog介绍
Qt Quick中的FileDialog文件对话框支持的平台有:
笔者使用的是Qt 5.8以上的版本,模块是import Qt.labs.platform 1.1.
它的属性如下所示:
Signals:
Methods:
示例如下所示:
Window { visible: true; width: 560 height: 440 FileDialog { id: fileDialog title: "打开图片或者txt文件" nameFilters: ["Text files (*.txt)", "HTML files (*.png *.jpg)"] acceptLabel: "确定" rejectLabel: "取消" fileMode: FileDialog.OpenFile onAccepted: { console.log("选中的文件有:") for (var i in files) { console.log(files[i]) } } } Button { text: "打开单个文件" onPressed: fileDialog.open(); } }
2.FolderDialog
FolderDialog的属性非常少,毕竟只是文件夹对话框.
它的options属性如果设置为FolderDialog.ShowDirsOnly,那么将会只显示文件夹.
当我们对话框在某个文件夹下面时,点击确定,则会将当前文件夹路径保存在currentFolder属性中.
接下来我们便来个综合示例.
3.FileDialog和FolderDialog综合示例
界面效果图如下所示:
当我们打开多个文件、保存文件、选择文件夹时,则将目录路径以及选中的文件路径都打印在TextArea中,下次再次点击对话框时,则以之前打开的目录路径为默认路径.
该示例使用了两个自定义控件:
整个代码如下所示:
import QtQuick 2.14 import QtQuick.Window 2.0 import QtQuick.Controls 2.4 import QtQuick.Layouts 1.14 import Qt.labs.platform 1.1 Window { visible: true; width: 560 height: 440 property string defaltFolderUrl: "file:///C:/" // 对话框目录路径 FileDialog { id: fileDialog acceptLabel: "确定" rejectLabel: "取消" nameFilters: ["All (*)", "Text files (*.txt)", "HTML files (*.png *.jpg)"] folder: defaltFolderUrl onAccepted: { textArea.text = "当前路径:\n "+defaltFolderUrl + "\n\n" + title + ":\n" for (var i in files) { textArea.text += " " + files[i] + "\n" } } onFolderChanged: { defaltFolderUrl = folder; } } FolderDialog { id: folderDlialog acceptLabel: "确定" rejectLabel: "取消" folder: defaltFolderUrl options: FolderDialog.ShowDirsOnly onAccepted: { textArea.text = "当前路径:\n "+defaltFolderUrl + "\n\n" + title + ":\n " textArea.text += currentFolder defaltFolderUrl = currentFolder } onFolderChanged: { defaltFolderUrl = folder; } } RowLayout { anchors.fill: parent anchors.margins: 20 spacing: 10 ScrollView { id: view Layout.fillWidth: true Layout.fillHeight: true Layout.columnSpan: 3 Layout.preferredWidth: 240 Layout.preferredHeight: 300 clip: true ScrollBar.vertical.policy: textArea.contentHeight > Layout.preferredHeight ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff; // 如果文本内容高度大于显示高度,则一直显示垂直滑动条 TextArea { id: textArea padding: 4 implicitWidth: 240 wrapMode: TextArea.WrapAnywhere text: "当前路径:\n "+defaltFolderUrl font.pixelSize: 14 background: Rectangle { width: parent.width height: parent.height border.color: "#B0B0B0" radius: 3 } } } DynamicGroupBox { title: "请选择对话框" Layout.fillHeight: true Layout.fillWidth: false Layout.preferredWidth: 130 // 在GridLayout中要想固定指定宽度,必须使用preferredWidth,然后将fillWidth置为false Layout.preferredHeight: 300 titleFontPixel: 15 Column { anchors.fill: parent spacing: 12 DynamicBtn { text: "打开单个文件" backColor: "#5CA1F6" fontPixelSize: 13 onPressed: { fileDialog.title = text fileDialog.fileMode = FileDialog.OpenFile fileDialog.open() } } DynamicBtn { text: "打开多个文件" backColor: "#56CDB7" fontPixelSize: 13 onPressed: { fileDialog.title = text fileDialog.fileMode = FileDialog.OpenFiles fileDialog.open() } } DynamicBtn { text: "保存文件" backColor: "#4F64BA" fontPixelSize: 13 onPressed: { fileDialog.title = text fileDialog.fileMode = FileDialog.SaveFile fileDialog.currentFile = "file:///123.txt" fileDialog.open() } } DynamicBtn { text: "选择文件夹" backColor: "#F08140" fontPixelSize: 13 onPressed: { folderDlialog.title = text folderDlialog.open() } } } } } }