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

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

通过使用文件选择器，可以在不创建对样式的硬依赖的情况下应用特定于样式的调整。从可用的文件变体中，只有选定的 QML 文件会被 QML 引擎加载。每个文件变体可以假设上下文，即特定的样式。这通常导致一些代码重复，但另一方面，上述硬依赖得到的样式被切断，从而导致更简单、更有效的 QML 代码。

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

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

默认情况下，main.qml 将为 CustomButton 类型使用 CustomButton.qml。然而，当应用程序以 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 控件中的文件选择器#

相关信息#