样式化Qt Quick控件

可用样式

Qt Quick Controls 提供了一系列样式选择。

基本样式

../_images/qtquickcontrols-basic.png

基本样式 是一个简单且轻量级的全能样式,为 Qt Quick Controls 提供了最佳性能。

融合风格

../_images/qtquickcontrols-fusion-dark.png

Fusion 风格的浅色主题。

../_images/qtquickcontrols-fusion-dark.png

Fusion 风格的深色主题。

Fusion Style 是一种平台无关的样式,为 Qt Quick Controls 提供了面向桌面的外观和感觉。

想象风格

../_images/qtquickcontrols-imagine.png

Imagine Style 是基于图像资源的。该样式附带了一组默认的图像,可以通过使用预定义的命名约定提供一个包含图像的目录来轻松更改。

macOS 风格

../_images/qtquickcontrols-macos-dark.png

macOS 风格的浅色主题。

../_images/qtquickcontrols-macos-dark.png

macOS 风格的深色主题。

macOS Style 是一种原生风格的 macOS 样式。

注意

此样式仅适用于在macOS上运行的应用程序。

iOS 风格

../_images/qtquickcontrols-ios-dark.png

iOS 风格的浅色主题。

../_images/qtquickcontrols-ios-dark.png

iOS 风格的深色主题。

iOS 风格 是一种基于图像资源的原生 iOS 外观风格。

注意

此样式仅适用于在iOS上运行的应用程序。

材料风格

../_images/qtquickcontrols-material-dark.png

Material 风格的浅色主题。

../_images/qtquickcontrols-material-dark.png

Material 风格的深色主题。

Material Style 提供了一个基于 Google Material Design Guidelines 的吸引人的设计,但比基本风格需要更多的系统资源。

通用样式

../_images/qtquickcontrols-universal-dark.png

通用风格的浅色主题。

../_images/qtquickcontrols-universal-dark.png

通用风格的深色主题。

通用样式提供了基于微软通用设计指南的吸引人的设计,但比基本样式需要更多的系统资源。

Windows 风格

../_images/qtquickcontrols-windows.png

Windows Style 是一种具有原生外观的 Windows 风格。

注意

此样式仅适用于在Windows上运行的应用程序。

FluentWinUI3 风格

../_images/qtquickcontrols-fluentwinui3-dark.png

FluentWinUI3 风格的浅色主题。

../_images/qtquickcontrols-fluentwinui3-dark.png

FluentWinUI3 风格的深色主题。

FluentWinUI3 样式 是一种现代、原生外观的样式,专为运行 Windows 11 及更高版本的平台设计,遵循 Fluent UI 和 WinUI 3 设计指南。FluentWinUI3 可以在所有支持的平台上运行。

在Qt Quick Controls中使用样式

默认样式

如果没有明确设置样式,将使用默认样式。所使用的样式取决于操作系统:

对于所有其他操作系统,使用基本样式

编译时样式选择

编译时样式选择是一种通过在QML中导入来指定使用样式的方法。例如,要导入Material样式:

请注意,QtQuick.Controls(负责运行时样式选择)未被导入。备用样式由样式的qmldir指定:

module QtQuick.Controls.Material
# ...
import QtQuick.Controls.Basic auto

编译时样式选择的好处是QML编译器知道正在使用哪种特定样式,并可以为绑定生成C++代码。

另一个好处是,QtQuick.Controls 插件未被使用,因此不需要与应用程序一起部署。

如果你的应用程序是静态构建的,显式导入也是必要的。

编译时样式选择的一个缺点是,一个可执行文件不能支持多种样式,因为每种样式都需要自己的样式。

运行时样式选择

运行时样式选择是一种通过导入QtQuick.Controls来指定使用样式的方式:

QtQuick.Controls 插件将导入通过以下方法之一在运行时设置的样式:

这些方法的优先级按照它们列出的顺序,从高到低。也就是说,使用QQuickStyle来设置样式总是优先于使用命令行参数,例如。

同样,可以通过以下方法之一设置回退样式:

注意

只有在主样式的qmldir文件中没有静态选择回退样式时,才能动态选择回退样式。

运行时样式选择的好处是,单个应用程序二进制文件可以支持多种样式,这意味着最终用户可以选择使用哪种样式来运行应用程序。

这种方法的缺点是QML编译器无法知道正在使用哪种特定样式,因此无法为Qt Quick Controls类型的属性生成C++代码。这不会影响QML编译器为其他模块的类型生成C++代码的能力。

在C++中使用QQuickStyle

QQuickStyle 提供了用于配置特定样式的C++ API。以下示例使用Material样式运行一个Qt Quick Controls应用程序:

QQuickStyle::setStyle("Material");

有关更多详细信息,请参阅QQuickStyle的详细描述。

命令行参数

传递一个-style命令行参数是测试不同样式的便捷方式。它优先于下面列出的其他方法。以下示例使用Material样式运行一个Qt Quick Controls应用程序:

./app -style material

环境变量

设置QT_QUICK_CONTROLS_STYLE环境变量可用于设置系统范围的样式偏好。它优先于下面提到的配置文件。以下示例使用Universal样式运行Qt Quick Controls应用程序:

QT_QUICK_CONTROLS_STYLE=universal ./app

查看Qt Quick Controls中支持的环境变量以获取支持的环境变量的完整列表。

配置文件

Qt Quick Controls 支持一个特殊的配置文件,:/qtquickcontrols2.conf,该文件被内置到应用程序的资源中。

配置文件可以指定首选样式(可能会被前面描述的任何方法覆盖)和某些特定于样式的属性。以下示例指定首选样式为Material样式。

[Controls]
Style=Material

有关配置文件的更多详细信息,请参见Qt Quick Controls 配置文件