通用风格

通用风格基于微软通用设计指南。更多

附加属性

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

附加方法

• colorcolor（预定义枚举）

详细说明

通用样式是基于《微软通用设计指南》（Microsoft Universal Design Guidelines）的一种与设备无关的样式。通用样式在所有设备（从手机、平板电脑到个人电脑）上都具有良好的外观。

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

自定义

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

可以为任何窗口或项目指定这两种属性，它们会以与fonts 相同的方式自动传播给子代。在下面的示例中，窗口和所有三个单选按钮都显示为深色主题，并使用紫色重音色：

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

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 中的支持的环境变量。

依赖关系

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

如果通用样式被导入到始终加载的 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