AppStudioAppFramework proporciona un componente DocumentDialog para seleccionar archivos del almacenamiento local de su dispositivo. Este componente es idéntico al componente Qt Quick FileDialog en cuanto a funcionalidad, ya que contiene las mismas propiedades y métodos. Sin embargo, utiliza el cuadro de diálogo de selección de archivos nativo para todas las plataformas, en lugar de un cuadro de diálogo de archivos personalizado en iOS y Android, lo que permite una mejor interacción con el sistema operativo.
Examinar archivos con el cuadro de diálogo Documento
Para utilizar el componente DocumentDialog, el único requisito es el método open. Habilitar los permisos de almacenamiento externo también es necesario para dispositivos Android. La siguiente muestra de código presenta un uso básico de DocumentDialog, incluida una opción para habilitar el permiso de almacenamiento, si no lo está aún, y registrar posibles errores en el registro de la consola.
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
}
}
}
}
Propiedades adicionales
El componente DocumentDialog también proporciona un número de propiedades que se pueden utilizar para modificar la apariencia y el comportamiento del cuadro de diálogo resultante. En la referencia de API, encontrará una lista completa de estas propiedades, pero la siguiente muestra de código agrega propiedades útiles que se pueden utilizar para una selección de archivos más específica. Concretamente, la propiedad title se utiliza para dar un título al cuadro de diálogo, la propiedad selectMultiple le permite proporcionar varios archivos y la propiedad nameFilters proporciona dos opciones de filtrado, lo que le permite seleccionar entre todos los archivos o solo los archivos .jpg o .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
}
}
}
Las propiedades selectExisting y selectFolder se pueden utilizar para cambiar la forma de interactuar con los archivos. Si selectExisting se establece como false, puede utilizar el cuadro de diálogo para crear un archivo en lugar de seleccionar uno existente. Si la propiedad selectFolder se establece como true, puede seleccionar carpetas enteras en lugar de solo un archivo.