Utilisation de sélecteurs de fichiers avec les contrôles Qt Quick

File selectors offrent un moyen pratique de sélectionner des variantes de fichiers. Qt propose le nom de la plate-forme et la locale comme sélecteurs intégrés. Qt Quick Controls étend les sélecteurs intégrés avec le nom (en majuscules) du style avec lequel une application est exécutée.

L'utilisation de sélecteurs de fichiers permet d'apporter des modifications spécifiques à un style sans créer de dépendance absolue à l'égard de ce style. Parmi les variantes de fichiers disponibles, seul le fichier QML sélectionné est chargé par le moteur QML. Chaque variante de fichier peut assumer le contexte, c'est-à-dire un style spécifique. Cela conduit généralement à une certaine duplication du code, mais d'un autre côté, cela réduit la dépendance au style mentionnée ci-dessus, et conduit à un code QML plus simple et plus efficace.

L'exemple suivant montre un bouton arrondi personnalisé qui a une ombre portée stylisée dans le style Material, et qui semble plat dans les autres styles. Les fichiers sont organisés de manière à ce 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 utilise 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 arrondi.

// 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 un 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 des contrôles Qt Quick