Boîte de dialogue Document

L’AppFramework AppStudio offre un composant DocumentDialog pour sélectionner les fichiers depuis le stockage local de votre appareil. Ce composant est identique à la fonctionnalité du composant Qt Quick FileDialog, contenant les mêmes propriétés et méthodes, mais utilise le boîte de dialogue de sélection de fichier native pour toutes les plateformes plutôt qu’une boîte de dialogue de fichier personnalisé sur iOS et Android, pour une interaction optimale avec le système d’exploitation.

Parcourir les fichiers avec la boîte de dialogue Document

Pour utiliser le composant DocumentDialog, l’unique condition requise est la méthode open. L’activation des autorisations de stockage externe est également nécessaire pour les appareils Android. L’exemple de code suivant démontre une utilisation de base de DocumentDialog, y compris une option pour activer l‘autorisation de stockage si ce n’est pas déjà fait et la consignation des erreurs potentielles dans le journal de console.

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

Propriétés supplémentaires

Le composant DocumentDialog offre également diverses propriétés pour modifier l’apparence et le comportement de la boîte de dialogue obtenue. Une liste complète de ces propriétés est disponible dans la référence API, mais l’exemple de code suivant ajoute des propriétés utiles qui peuvent être utilisées pour une sélection plus précise des fichiers. Notamment, la propriété title est utilisée pour donner à la boîte de dialogue un titre, la propriété selectMultiple vous permet de fournir plusieurs fichiers, et la propriété nameFilters offre deux options de filtre, pour faire votre sélection à partir de tous les fichiers ou uniquement à partir des fichiers .jpg ou .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
                }
        }
}

Les propriétés selectExisting et selectFolder peuvent être utilisées pour modifier votre façon d’interagir avec les fichiers. Si selectExisting est définie sur false (faux), vous pouvez utiliser la boîte de dialogue pour créer un fichier plutôt qu’en sélectionnant un fichier existant ; en revanche, si la propriété selectFolder est définie sur true (vrai), vous pouvez sélectionner des dossiers entiers plutôt qu’un seul fichier.