Utilisation des sélecteurs de fichiers avec Qt Quick Controls

File selectors offrent un moyen pratique de sélectionner des variantes de fichiers. Qt propose le nom de la plateforme et les paramètres régionaux comme sélecteurs intégrés. Qt Quick Controls étend les sélecteurs intégrés avec le nom (en majuscules) du style utilisé par l'application.

L’utilisation de sélecteurs de fichiers permet d’appliquer des ajustements spécifiques à un style sans créer de dépendance stricte vis-à-vis de ce dernier. Parmi les variantes de fichiers disponibles, seul le fichier QML sélectionné est chargé par le moteur QML. Chaque variante de fichier peut adopter le contexte, c’est-à-dire un style spécifique. Cela entraîne généralement une certaine duplication du code, mais permet en revanche d’éliminer la dépendance stricte vis-à-vis du style mentionnée précédemment, et conduit à un code QML plus simple et plus efficace.

L’exemple suivant illustre un bouton arrondi personnalisé qui présente une ombre portée stylisée dans le style Material, et un aspect plat dans les autres styles. Les fichiers sont organisés de telle sorte que la version Material de CustomButton.qml soit placée dans un sous-répertoire +Material.

:/main.qml
:/CustomButton.qml
:/+Material/CustomButton.qml

Par défaut, main.qml utilisera CustomButton.qml pour le type « CustomButton ». Cependant, lorsque l’application est exécutée avec le style Material, le sélecteur « Material » sera présent et la version « +Material/CustomButton.qml » sera utilisée à la place.

// main.qml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    CustomButton {
        text: "Button"
        anchors.centerIn: parent
    }
}

L’implémentation de base du bouton personnalisé est un simple bouton plat aux coins arrondis.

// CustomButton.qml
import QtQuick
import QtQuick.Controls

Button {
    id: control

    background: Rectangle {
        radius: width / 2
        implicitWidth: 36
        implicitHeight: 36
        color: control.pressed ? "#ccc" : "#eee"
    }
}

L’implémentation du bouton personnalisé dans le style Material importe le style Material, demande un thème sombre pour obtenir du texte clair et crée une ombre portée pour l’arrière-plan.

// +Material/CustomButton.qml
import QtQuick
import QtQuick.Effects
import QtQuick.Controls
import QtQuick.Controls.Material

Button {
    id: control

    Material.theme: Material.Dark

    background: Rectangle {
        implicitWidth: 48
        implicitHeight: 48
        color: Material.accentColor
        radius: width / 2

        layer.enabled: control.enabled
        layer.effect: MultiEffect {
            shadowEnabled: true
            shadowHorizontalOffset: 3
            shadowVerticalOffset: 3
            shadowColor: Material.dropShadowColor
            shadowBlur: control.pressed ? 0.8 : 0.4
        }
    }
}

Informations connexes

• QFileSelector
• QQmlFileSelector
• Stylisation Qt Quick Controls