通用样式

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

关联属性

• accent: color
• background: color
• 前景色：颜色
• 主题：枚举

关联方法

• 颜色color(枚举类型 predefined)

详细说明

“通用”样式是一种基于微软通用设计指南的、与设备无关的样式。该样式旨在确保在从手机、平板电脑到个人电脑的所有设备上均能呈现良好的视觉效果。

若要运行采用通用样式的应用程序，请参阅《 Qt Quick Controls 中的样式使用》。

自定义

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

这两项属性均可针对任何窗口或控件进行指定，并会像fonts 一样自动传递给子元素。在下面的示例中，窗口和三个单选按钮均采用深色主题，并使用紫色强调色：

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Universal

ApplicationWindow {
    visible: true

    Universal.theme: Universal.Dark
    Universal.accent: Universal.Violet

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium");  checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

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

配置文件

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

环境变量

有关支持的环境变量的完整列表，请参阅 Qt Quick Controls 中的“支持的环境变量”。

依赖关系

必须单独导入“通用”样式，才能使用该样式特有的属性。需要注意的是，无论是否引用了“通用”样式，相同的应用程序代码在任何其他样式下均可运行。“通用”样式特有的属性仅在应用程序以“通用”样式运行时才生效。

如果“通用”样式被导入到一个始终被加载的 QML 文件中，则必须将“通用”样式与应用程序一同部署，这样无论应用程序使用哪种样式运行，都能正常运行。通过使用文件选择器，可以在不与样式建立硬性依赖关系的情况下应用特定于样式的调整。

预定义的通用颜色

可用的预定义颜色：

另请参阅 “基本样式”、“材质样式”

附加属性文档

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

默认值为Universal.Cobalt 。

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

Button {
    text: qsTr("Button")
    highlighted: true
    Universal.accent: Universal.Orange
}

此附加属性用于指定主题的背景色。该属性可附加到任何窗口或项目上。其值会传播给子元素。

默认值取决于主题（浅色或深色）。

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

Pane {
    Universal.background: Universal.Steel

    Button {
        text: qsTr("Button")
    }
}

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

默认值取决于主题（浅色或深色）。

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

Button {
    text: qsTr("Button")
    Universal.foreground: Universal.Pink
}

此附加属性用于标识主题是浅色还是深色。该属性可附加到任何窗口或项目上。其值会传播给子元素。

可用主题：

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

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

Pane {
    Universal.theme: Universal.Dark

    Button {
        text: qsTr("Button")
    }
}

附带的方法文档

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

Rectangle {
    color: Universal.color(Universal.Red)
}

相关信息

• 样式设置Qt Quick Controls