QML学习笔记（四十）QML的FileDialog和FolderDialog

前言

从本节开始，我们将介绍几个常用的弹窗，它们将有效提高界面的交互性，引导用户进行下一步的操作。
首先介绍的是选择文件和选择目录的弹窗。

一、模块引入

我的qt版本是5.14.2，还没有升到6.0，所以有些模块支持得不好。
在我的版本里面，FileDialog是属于QtQuick.Dialogs 1.2的，这是QtQuick的一个弹窗模块，但FolderDialog不在其中，只有在Qt6才包含在内。
如果想要使用FolderDialog，只能退回到5.8的import Qt.labs.platform 1.1，可问题是Qt.labs.platform里也有对于FileDialog，这样可能会起冲突。
我选择的做法，是对这两个模块起别名。

import QtQuick.Dialogs 1.2 as OldDialogs
import Qt.labs.platform 1.1 as NativeDialogsNativeDialogs.FileDialog { ... }
OldDialogs.FileDialog { ... }

这里引用的时候，需要戴上别名，希望在接下来的代码中不会让你产生混乱。

二、代码演示

这里我直接做了两个按钮，分别获取用户选择的文件和目录：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
//import QtQuick.Dialogs 1.2
//import Qt.labs.platform 1.1
import QtQuick.Dialogs 1.2 as OldDialogs
import Qt.labs.platform 1.1 as NativeDialogsWindow {visible: truewidth: 640height: 480title: qsTr("QmlDialog")ColumnLayout{spacing: 20anchors.centerIn: parentButton{text: "Choose file"onClicked: function(){fileDialogId.open()}}Button{text: "Choose folder"onClicked: function(){folderDialogId.open()}}Text{id:textIdtext: "User hasn't chosen yet."wrapMode: Text.Wrap}OldDialogs.FileDialog{id: fileDialogIdtitle: "Choose file"nameFilters: ["Text files (*.txt)", "HTML files (*.html *htm)", "Images (*.jpg *.png)"]
//            fileMode: FileDialog.OpenFiles    // Qt6selectMultiple: trueonAccepted: textId.text = "文件：" + fileDialogId.fileUrlsonRejected: console.log("Dialog rejected")}NativeDialogs.FolderDialog {id: folderDialogIdfolder: "D:/"onAccepted: {textId.text = folderDialogId.currentFolder}onRejected: console.log("Dialog rejected")}}}

大概是这样吧，写的不是很好。

三、总结

这种弹窗的引用其实是直接拿官方现成的来使用，样式啥的都比较丑。
不过掌握这种弹窗的使用还是很有必要的。