使用Qt Quick Controls的文件选择器¶

文件选择器提供了一种选择文件变体的便捷方式。Qt 提供了平台名称和区域设置作为内置选择器。Qt Quick Controls 扩展了内置选择器，增加了应用程序运行时所使用的样式名称（首字母大写）。

通过使用文件选择器，可以在不创建对样式的硬依赖的情况下应用特定样式的调整。从可用的文件变体中，QML引擎仅加载选定的QML文件。每个文件变体可以假设上下文，即特定样式。这通常会导致一些代码重复，但另一方面，减少了对样式的上述硬依赖，并导致更简单和更高效的QML代码。

以下示例展示了一个自定义圆角按钮，该按钮在Material风格中具有样式化的阴影，并在其他风格中看起来是扁平的。文件组织方式是将CustomButton.qml的Material版本放置在+Material子目录中。

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

默认情况下，main.qml 将使用 CustomButton.qml 作为 CustomButton 类型。然而，当应用程序以 Material 风格运行时，Material 选择器将存在，并且将使用 +Material/CustomButton.qml 版本。

// main.qml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

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

自定义按钮的基本实现是一个简单的圆角扁平按钮。

// CustomButton.qml
import QtQuick
import QtQuick.Controls

Button {
    id: control

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

Material 风格的自定义按钮实现导入了 Material 风格，请求深色主题以获得浅色文本，并为背景创建了阴影效果。

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