21.Quick QML-FileDialog、FolderDialog對話方塊

1.FileDialog介紹

Qt Quick中的FileDialog檔案對話方塊支援的平臺有:

 

筆者使用的是Qt 5.8以上的版本,模組是import Qt.labs.platform 1.1.

 

它的屬性如下所示:

• acceptLabel : string,標籤,設定對話方塊中的接收按鈕的文字內容,預設標籤通常為開啟或儲存
• rejectLabel : string,標籤,設定對話方塊中的拒絕按鈕的文字內容
• currentFile : url,此屬性儲存對話方塊中當前選定的檔案路徑,假如我們是儲存檔案,並且想給要儲存的檔案命名,比如123.txt,則賦值"file:///123.txt"
• currentFiles : list<url>,此屬性儲存對話方塊中當前多選下選定的檔案
• defaultSuffix : string,預設字尾,如果選定的檔案字尾名沒有,那麼將defaultSuffix新增到指定到選定的檔名末尾
• file : url,此屬性儲存使用者最終選中的檔案,和currentFile不同,只有當使用者點選"確定"鍵後,才會賦值.
• files : list<url>,此屬性儲存使用者最終選中的多個檔案.和currentFiles不同,只有當使用者點選"確定"鍵後,才會賦值.
• fileMode : enumeration,對話方塊屬性,取值如下所示:
  • FileDialog.OpenFile: 開啟檔案(預設)
  • FileDialog.OpenFiles: 開啟多個檔案
  • FileDialog.SaveFile: 儲存檔案
• folder : url,此屬性儲存檔案對話方塊預設開啟時的資料夾路徑.如果要使用資料夾對話方塊,請改用FolderDialog元素
• nameFilters : list<string>: 檔名篩選器.比如:nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)"]
• options : flags,對話方塊選項,預設都是禁止的,取值如下所示:
  • FileDialog.DontResolveSymlinks : 不要在資料夾對話方塊中解決符號連結
  • FileDialog.DontConfirmOverwrite : 在儲存檔案狀態下,如果檔案已存在,則不提示使用者,直接覆蓋,預設是要提示的.
  • FileDialog.ReadOnly : 設定對話方塊不允許建立目錄。
  • FileDialog.HideNameFilterDetails ： 是否隱藏檔名篩選器詳細資訊
• selectedNameFilter.index : int,儲存使用者選擇的哪個篩選器索引號
• selectedNameFilter.name : string,儲存使用者選擇的哪個篩選器名稱
• selectedNameFilter.extensions : list<string> ,儲存使用者選擇的哪個篩選器擴充套件列表,比如"HTML files (*.html *.htm)",那麼extensions = ["html","htm"]
• title : string, 對話方塊標題
• result : int,對話方塊結果,取值有:
• Dialog.Accepted : 使用者選擇了接收按鈕
• Dialog.Rejected : 使用者選擇了拒絕按鈕

Signals:

• void accepted() : 當使用者選擇了接收按鈕,則發出該訊號,假如呼叫了close()則不會發出
• void rejected() : 當使用者選擇了拒絕按鈕,則發出該訊號,假如呼叫了close()則不會發出

Methods:

• void accept() : 關閉對話方塊,併發射accepted()訊號
• void close() : 關閉對話方塊,不會發射訊號
• void done(result) : 關閉對話方塊,並設定result屬性值.
• void open() : 開啟對話
• void reject() : 關閉對話方塊,併發射rejected()訊號

示例如下所示:

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中,下次再次點選對話方塊時,則以之前開啟的目錄路徑為預設路徑.

該示例使用了兩個自定義控制元件:

• DynamicGroupBox （控制元件程式碼路徑:https://www.cnblogs.com/lifexy/p/14751099.html）
• DynamicBtn   (控制元件程式碼路徑:https://www.cnblogs.com/lifexy/p/14671855.html)

整個程式碼如下所示:

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()
                     }

                 }
             }
        }
    }

}