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，这样可能会起冲突。

我选择的做法，是对这两个模块起别名。

cpp 复制代码

import QtQuick.Dialogs 1.2 as OldDialogs
import Qt.labs.platform 1.1 as NativeDialogs

NativeDialogs.FileDialog { ... }
OldDialogs.FileDialog { ... }

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

二、代码演示

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

cpp 复制代码

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 NativeDialogs

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QmlDialog")

    ColumnLayout{
        spacing: 20
        anchors.centerIn: parent

        Button{
            text: "Choose file"
            onClicked: function(){
                fileDialogId.open()
            }
        }

        Button{
            text: "Choose folder"
            onClicked: function(){
                folderDialogId.open()
            }
        }

        Text{
            id:textId
            text: "User hasn't chosen yet."
            wrapMode: Text.Wrap
        }

        OldDialogs.FileDialog{
            id: fileDialogId
            title: "Choose file"
            nameFilters: ["Text files (*.txt)", "HTML files (*.html *htm)", "Images (*.jpg *.png)"]
//            fileMode: FileDialog.OpenFiles    // Qt6
            selectMultiple: true
            onAccepted: textId.text = "文件：" + fileDialogId.fileUrls
            onRejected: console.log("Dialog rejected")
        }
        
        NativeDialogs.FolderDialog {
            id: folderDialogId
            folder: "D:/"
            onAccepted: {
                textId.text = folderDialogId.currentFolder
            }

            onRejected: console.log("Dialog rejected")
        }
    }


}

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

三、总结

这种弹窗的引用其实是直接拿官方现成的来使用，样式啥的都比较丑。

不过掌握这种弹窗的使用还是很有必要的。