文档对话框

AppStudioAppFramework 提供了一个用于从设备的本地存储中选择文件的 DocumentDialog 组件。该组件的功能与 Qt Quick FileDialog 组件的功能相同,包含相同的属性和方法,但在所有平台上都使用本机文件选择对话框,而不是在 iOS 和 Android 上使用自定义文件对话框,从而可以更好地与操作系统进行交互。

使用文档对话框浏览文件

要使用 DocumentDialog 组件,唯一的要求是 open 方法。Android 设备还需要启用外部存储权限。以下代码示例演示了 DocumentDialog 的基本用法 ,包括启用存储权限(如果尚未启用)的选项,以及在控制台日志中记录潜在错误的方法。

Item {
    property bool storagePermissionGranted
    Component.onCompleted: {
        // Check if storage permission is granted (only required for Android)
        storagePermissionGranted = Permission.checkPermission(Permission.PermissionTypeStorage) === Permission.PermissionResultGranted
    }
    PermissionDialog {
        id: permissionDialog
        openSettingsWhenDenied: true
        permission: PermissionDialog.PermissionDialogTypeStorage
        onAccepted: {
            documentDialog.open()
            console.log("Permission accepted")
        }
        onRejected: {
            console.log("Permission rejected")
        }
    }
    Button {
        text: "Select document"
        onClicked: {
            if (documentDialog.supported) {
                if (storagePermissionGranted === false){
                    permissionDialog.open()
                }
                else (storagePermissionGranted === true){
                    documentDialog.open()
                }
            }
            else {
                console.log("Not Supported")
            }
        }
    }
        DocumentDialog {
                id: documentDialog
                onAccepted: {
                        console.log("selected file URL " , fileUrl)
                }
                onRejected: {
                        if (status == DocumentDialog.DocumentDialogCancelledByUser) {
                                // Cancelled By User
                        }
                        if (status == DocumentDialog.DocumentDialogPermissionDenied) {
                                // Permission Denied
                        }
                        if (status == DocumentDialog.DocumentDialogNotSupported) {
                                // Not Supported
                        }
                        if (status == DocumentDialog.DocumentDialogFileReadError) {
                                // File Read Error
                        }
                }
        }
}

其他属性

DocumentDialog 组件还提供了许多属性,可用于更改生成的对话框的外观和行为。这些属性的完整列表可以在 API 参考中找到, 但是以下代码示例添加了有用的属性,这些属性可用于更具体的文件选择。具体来说, title 属性用于为对话框赋予标题, selectMultiple 属性可让您提供多个文件,并且 nameFilters 属性提供两个过滤选项,允许您从所有文件中选择或仅选择 .jpg.png 文件。

DocumentDialog {
        id: doc
        title: "Select an image"
        selectMultiple: true
        nameFilters: [ "Image files (*.jpg *.png)", "All files (*)" ]
        onAccepted: {
                console.log("selected file path " , filePath)
        }
        onRejected: {
                if (status == DocumentDialog.DocumentDialogCancelledByUser) {
                        // Cancelled By User
                }
                if (status == DocumentDialog.DocumentDialogPermissionDenied) {
                        // Permission Denied
                }
                if (status == DocumentDialog.DocumentDialogNotSupported) {
                        // Not Supported
                }
                if (status == DocumentDialog.DocumentDialogFileReadError) {
                        // File Read Error
                }
        }
}

selectExistingselectFolder 属性可用于更改与文件交互的方式。如果 selectExisting 设置为 false,则可以使用对话框来创建文件,而不是选择现有文件;如果 selectFolder 属性设置为 true,则可以选择整个文件夹,而不是仅选择文件。