Verwendung von Dateiauswahlfeldern mit Qt Quick Controls

File selectors bieten eine bequeme Möglichkeit, Dateivarianten auszuwählen. Qt stellt den Plattformnamen und die Locale als integrierte Selektoren bereit. ` 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 Dateiauswahlfunktionen lassen sich stilbezogene Anpassungen vornehmen, ohne eine feste Abhängigkeit von einem Stil 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, annehmen. Dies führt zwar typischerweise zu einer gewissen Code-Duplizierung, vermeidet aber andererseits die zuvor erwähnte feste Abhängigkeit vom Stil und führt zu einfacherem und effizienterem QML-Code.

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

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

Standardmäßig verwendet „ main.qml “ „ CustomButton.qml “ für den Typ „ CustomButton “. Wird die Anwendung jedoch mit dem Material-Stil ausgeführt, ist der Selektor „ Material “ vorhanden, und stattdessen wird die Version „ +Material/CustomButton.qml “ 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, abgerundete, 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 Material-Stil importiert den Material-Stil, fordert ein dunkles Design an, um hellen Text zu erhalten, und erzeugt 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
        }
    }
}

Weiterführende Informationen

• QFileSelector
• QQmlFileSelector
• Gestaltung Qt Quick Controls