El uso de selectores de archivos con Qt Quick Controls

File selectors proporcionan una forma conveniente de seleccionar variantes de archivos. Qt ofrece el nombre de la plataforma y la configuración regional como selectores incorporados. Qt Quick Controls amplía los selectores incorporados con el nombre (en mayúsculas) del estilo con el que se está ejecutando una aplicación.

Mediante el uso de selectores de archivo, los ajustes específicos de estilo se pueden aplicar sin crear una dependencia dura a un estilo. De las variantes de archivo disponibles, el motor QML sólo carga el archivo QML seleccionado. Cada variante de archivo puede asumir el contexto, es decir, un estilo específico. Por lo general, esto conlleva cierta duplicación de código, pero, por otro lado, elimina la mencionada dependencia estricta del estilo y da lugar a un código QML más sencillo y eficiente.

El siguiente ejemplo muestra un botón redondeado personalizado que tiene una sombra estilizada en el estilo Material y un aspecto plano en otros estilos. Los archivos están organizados de forma que la versión Material de CustomButton.qml se coloca en un subdirectorio +Material.

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

Por defecto, main.qml utilizará CustomButton.qml para el tipo CustomButton. Sin embargo, cuando la aplicación se ejecuta con el estilo Material, el selector Material estará presente y se utilizará la versión +Material/CustomButton.qml en su lugar.

// main.qml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

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

La implementación base del botón personalizado es un simple botón plano redondeado.

// CustomButton.qml
import QtQuick
import QtQuick.Controls

Button {
    id: control

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

La implementación del botón personalizado del estilo Material importa el estilo Material, solicita un tema oscuro para obtener un texto claro y crea una sombra paralela para el fondo.

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

Información relacionada

• QFileSelector
• QQmlFileSelector
• Estilización Qt Quick Controls