通用样式

通用样式基于微软通用设计指南。更多…

附加属性

  • accent :ref:` <通用样式>` : 颜色

  • 背景 :ref:` ` : 颜色

  • foreground :ref:` <通用样式>` : 颜色

  • theme :ref:` <通用样式>` : 枚举

附加方法

  • 颜色 color :ref:` ` (枚举预定义)

详细描述

通用样式是一种基于Microsoft通用设计指南的设备无关样式。通用样式设计得在所有设备上看起来都很棒，从手机和平板电脑到个人电脑。

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

通用风格的浅色主题。
../_images/qtquickcontrols-universal-dark.png

通用风格的深色主题。

要使用通用样式运行应用程序，请参阅在Qt Quick Controls中使用样式。

注意

通用样式不是原生的Windows 10样式。通用样式是一个100%跨平台的Qt Quick Controls样式实现，遵循微软通用设计指南。该样式可以在任何平台上运行，并且在任何地方看起来都大致相同。由于可用系统字体和字体渲染引擎的差异，可能会出现一些细微的差异。

自定义

通用样式允许自定义四个属性，主题、强调色、前景色和背景色。

../_images/qtquickcontrols-universal-attributes.png

这两个属性可以为任何窗口或项目指定，并且它们会自动以与字体相同的方式传播到子元素。在以下示例中，窗口和所有三个单选按钮都使用紫色强调颜色显示在深色主题中：

++———————————————————-+ || .. 图片:: images/qtquickcontrols-universal-violet.png| ++———————————————————-+

除了在QML中指定属性外，还可以通过环境变量或在配置文件中指定它们。在QML中指定的属性优先于所有其他方法。

配置文件

变量

描述

Theme

指定默认的Universal theme。该值可以是可用的主题之一，例如"Dark"。

Accent

指定默认的通用强调色。该值可以是任何颜色，但建议使用预定义的通用颜色之一，例如"Violet"。

Foreground

指定默认的通用前景色。该值可以是任何颜色，或者是预定义的通用颜色之一，例如"Brown"。

Background

指定默认的通用背景颜色。该值可以是任何颜色，或者是预定义的通用颜色之一，例如"Steel"。

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

环境变量

变量

描述

QT_QUICK_CONTROLS_UNIVERSAL_THEME

指定默认的Universal theme。该值可以是可用的主题之一，例如"Dark"。

QT_QUICK_CONTROLS_UNIVERSAL_ACCENT

指定默认的通用强调色。该值可以是任何颜色，但建议使用预定义的通用颜色之一，例如"Violet"。

QT_QUICK_CONTROLS_UNIVERSAL_FOREGROUND

指定默认的Universal前景色。该值可以是任何颜色，或者是预定义的Universal颜色之一，例如"Brown"。

QT_QUICK_CONTROLS_UNIVERSAL_BACKGROUND

指定默认的通用背景颜色。该值可以是任何颜色，或者是预定义的通用颜色之一，例如"Steel"。

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

依赖

必须单独导入通用样式才能访问特定于通用样式的属性。需要注意的是，无论是否引用通用样式，相同的应用程序代码都可以与其他样式一起运行。只有在应用程序以通用样式运行时，特定于通用样式的属性才会生效。

如果在始终加载的QML文件中导入了通用样式，则必须将通用样式与应用程序一起部署，以便无论应用程序使用哪种样式运行，都能运行应用程序。通过使用文件选择器，可以应用特定样式的调整，而无需创建对样式的硬依赖。

预定义的通用颜色

可用的预定义颜色：

  • 通用.Lime

另请参阅 基本样式 , 材料样式

附加属性文档

此附加属性保存主题的强调色。该属性可以附加到任何窗口或项目。该值会传播到子元素。

默认值为Universal.Cobalt。

在以下示例中，高亮按钮的强调颜色更改为 Universal.Orange：

Button {
    text: qsTr("按钮")
    highlighted: true
    Universal.accent: Universal.Orange
}
../_images/qtquickcontrols-universal-accent.png

注意

尽管强调色可以是任何颜色，但建议使用预定义的通用颜色之一，这些颜色设计得与通用风格调色板的其他部分很好地搭配。

此附加属性保存主题的背景颜色。该属性可以附加到任何窗口或项目。该值会传播到子元素。

默认值是主题特定的（浅色或深色）。

在以下示例中，窗格的背景颜色更改为 Universal.Steel：

Pane {
    Universal.background: Universal.Steel

    Button {
        text: qsTr("按钮")
    }
}
../_images/qtquickcontrols-universal-background.png

此附加属性保存主题的前景色。该属性可以附加到任何窗口或项目。该值会传播到子元素。

默认值是主题特定的（浅色或深色）。

在以下示例中，按钮的前景色设置为 Universal.Pink：

Button {
    text: qsTr("按钮")
    Universal.foreground: Universal.Pink
}
../_images/qtquickcontrols-universal-foreground.png

此附加属性保存主题是浅色还是深色。该属性可以附加到任何窗口或项目。该值会传播到子项。

可用主题：

  • 通用.光

  • 浅色主题（默认）

将主题设置为System会根据系统主题颜色选择浅色或深色主题。然而，在读取主题属性的值时，该值永远不会是System，而是实际的主题。

在以下示例中，窗格和按钮的主题都设置为 Universal.Dark：

Pane {
    Universal.theme: Universal.Dark

    Button {
        text: qsTr("按钮")
    }
}
../_images/qtquickcontrols-universal-theme.png

附加方法文档

此附加方法返回指定的预定义通用颜色的有效颜色值。