使用 Qt Quick 控件的文件选择器

文件选择器提供了一种方便的选择文件变体的方式。Qt 提供了平台名称和地区作为内置选择器。Qt Quick 控件通过应用程序运行时使用的样式的名称（首字母大写）扩展了内置选择器。

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

以下示例演示了一个自定义圆角按钮，它在 Material 风格中具有样式化的阴影，在其他风格中看起来扁平。文件组织方式是这样的，Material 版本的 CustomButton.qml 被放在一个 +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
        }
    }
}

注意：建议使用 QQmlApplicationEngine，它内部创建了一个 QQmlFileSelector 实例。这是使用 QML 文件选择器所需的所有内容。

使用 Qt Quick 控件的文件选择器

相关信息