Die Verwendung von Datei-Selektoren mit Qt Quick Controls

File selectors bieten eine bequeme Möglichkeit zur Auswahl von Dateivarianten. Qt bietet den Plattformnamen und das Gebietsschema als integrierte Selektoren an. Qt Quick Controls erweitert die integrierten Selektoren um den Namen (in Großbuchstaben) des Stils, mit dem eine Anwendung ausgeführt wird.

Durch die Verwendung von Datei-Selektoren können style-spezifische Anpassungen vorgenommen werden, ohne eine feste Abhängigkeit zu einem Style zu schaffen. Von den verfügbaren Dateivarianten wird nur die ausgewählte QML-Datei von der QML-Engine geladen. Jede Dateivariante kann den Kontext, d. h. einen bestimmten Stil, übernehmen. Dies führt in der Regel zu einer gewissen Codeduplizierung, aber andererseits wird die oben erwähnte harte Abhängigkeit vom Stil aufgehoben, was zu einem einfacheren und effizienteren QML-Code führt.

Das folgende Beispiel zeigt eine benutzerdefinierte abgerundete Schaltfläche, die im Material-Stil einen gestylten Schlagschatten hat und in anderen Stilen flach aussieht. Die Dateien sind so organisiert, dass die Material-Version von CustomButton.qml in einem Unterverzeichnis +Material abgelegt ist.

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

Standardmäßig verwendet main.qml CustomButton.qml für den Typ CustomButton. Wenn die Anwendung jedoch mit dem Stil Material ausgeführt wird, ist der Selektor Material vorhanden und die Version +Material/CustomButton.qml wird stattdessen verwendet.

// main.qml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

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

Die Basisimplementierung der benutzerdefinierten Schaltfläche ist eine einfache runde, flache Schaltfläche.

// CustomButton.qml
import QtQuick
import QtQuick.Controls

Button {
    id: control

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

Die Implementierung der benutzerdefinierten Schaltfläche im Materialstil importiert den Materialstil, fordert ein dunkles Thema an, um hellen Text zu erhalten, und erstellt einen Schlagschatten für den Hintergrund.

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

Verwandte Informationen

• QFileSelector
• QQmlFileSelector
• Gestalten von Qt Quick Controls