AppStudioAppFramework bietet eine DocumentDialog-Komponente zum Auswählen von Dateien aus dem lokalen Speicher des Geräts. Die Funktionalität dieser Komponente ist identisch mit der der Qt Quick-Komponente FileDialog. Sie enthält die gleichen Eigenschaften und Methoden, statt eines benutzerdefinierten Dialogfelds unter iOS and Android wird jedoch für alle Plattformen das native Dialogfeld zur Dateiauswahl verwendet und so eine bessere Interaktion mit dem Betriebssystem ermöglicht.
Durchsuchen von Dateien mit dem Dialogfeld "Dokument"
Die einzige Anforderung für die Verwendung der Komponente DocumentDialog ist die Methode open. Für Android-Geräte müssen auch Berechtigungen für externen Speicher aktiviert werden. Das folgende Codebeispiel zeigt eine grundlegende Verwendung von DocumentDialog. Es umfasst eine Option zur Aktivierung der Speicherberechtigung, sofern diese noch nicht aktiviert ist, sowie zur Protokollierung möglicher Fehler im Konsolenprotokoll.
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
}
}
}
}Zusätzliche Eigenschaften
Die Komponente DocumentDialog bietet ferner eine Reihe von Eigenschaften, mit denen Aussehen und Verhalten des resultierenden Dialogfeldes geändert werden können. Eine umfassende Liste dieser Eigenschaften finden Sie in der API-Referenz. Nützliche Eigenschaften für eine spezifischere Dateiauswahl lassen sich mit dem folgenden Codebeispiel hinzufügen. Insbesondere wird die Eigenschaft title verwendet, um das Dialogfeld mit einem Titel zu versehen. Mit der Eigenschaft selectMultiple können Sie mehrere Dateien bereitstellen, und mit der Eigenschaft nameFilters werden zwei Filteroptionen bereitgestellt, die eine Auswahl aus allen Dateien oder lediglich aus .jpg- oder .png -Dateien ermöglichen.
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
}
}
}Die Eigenschaften selectExisting und selectFolder können verwendet werden, um die Art der Interaktion mit den Dateien zu ändern. Ist selectExisting auf "false" festgelegt, können Sie das Dialogfeld verwenden, um eine Datei zu erstellen statt eine vorhandene Datei auszuwählen. Ist die Eigenschaft selectFolder auf "true" festgelegt, können Sie statt lediglich einer Datei ganze Ordner auswählen.