QML样式：Default 、Universal 、Material

QML样式：Default 、Universal 、Material

目录

Default 样式

Universal Style

Customization

预定义的通用颜色

属性

Material 

Customization

预定义的材料颜色

预定义的阴影

Variants

附加属性

附加属性

Default 样式

• 官方文档：https://doc.qt.io/qt-5/qtquickcontrols2-default.html

• 默认样式是基本的全面样式。
• 默认样式是一种简单轻巧的样式，可为Qt快速控件提供最佳性能。它以最少的Qt Quick原语构建而成，并将动画和过渡效果保持在最低水平。

• 运行Qt Quick Controls应用程序时默认选择样式。它内置在模块的资源中，因此默认情况下，它随依赖于Qt Quick Controls模块的任何应用程序一起提供。
• 注意：默认样式用作其他样式的后备。如果某个样式未实现某个控件，则选择该控件的“默认”样式实现。

Universal Style

• 通用样式基于Microsoft通用设计准则
• 通用样式是基于Microsoft通用设计准则的与设备无关的样式。通用样式设计为在从手机，平板电脑到PC的所有设备上都不错。

• 要运行具有通用样式的应用程序，请参阅《在Qt快速控件中使用样式》。
• 注意：通用样式不是Windows 10本机样式。通用样式是一种遵循Microsoft通用设计准则的100％跨平台Qt快速控件样式实现。
  • 该样式可在任何平台上运行，并且在任何地方看起来或多或少都是相同的。由于可用的系统字体和字体呈现引擎的差异，可能会产生较小的差异。

Customization

• 通用样式允许自定义四个属性：theme, accent, foreground, and background.

• 可以为任何窗口或项目指定这两个属性，并且它们以与font相同的方式自动传播到子级。在下面的示例中，窗口和所有三个单选按钮使用紫色的配色出现在深色主题中：

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中指定的属性优先于所有其他方法。

【配置文件】

Theme	指定默认的通用主题。该值可以是可用主题之一，例如"Dark"。
Accent	指定默认的通用强调颜色。该值可以是任何颜色，但是建议使用例如预定义的通用颜色之一"Violet"。
Foreground	指定默认的Universal前景色。例如，该值可以是任何颜色，也可以是预定义的通用颜色之一"Brown"。
Background	指定默认的通用背景色。例如，该值可以是任何颜色，也可以是预定义的通用颜色之一"Steel"。

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

【环境变量】

QT_QUICK_CONTROLS_UNIVERSAL_THEME	指定默认的通用主题。该值可以是可用主题之一，例如"Dark"。
QT_QUICK_CONTROLS_UNIVERSAL_ACCENT	指定默认的通用强调颜色。该值可以是任何颜色，但是建议使用例如预定义的通用颜色之一"Violet"。
QT_QUICK_CONTROLS_UNIVERSAL_FOREGROUND	指定默认的Universal前景色。例如，该值可以是任何颜色，也可以是预定义的通用颜色之一"Brown"。
QT_QUICK_CONTROLS_UNIVERSAL_BACKGROUND	指定默认的通用背景色。例如，该值可以是任何颜色，也可以是预定义的通用颜色之一"Steel"。

• 有关受支持的环境变量的完整列表，请参见Qt Quick Controls中的受支持的环境变量。

依赖性

• 必须分别导入通用样式，才能访问特定于通用样式的属性。应该注意的是，无论对通用样式的引用如何，相同的应用程序代码都可以与任何其他样式一起运行。
• 通用属性仅在应用程序以通用样式运行时才有效。
• 如果将通用样式导入到始终加载的QML文件中，则必须将通用样式与应用程序一起部署，以便能够运行该应用程序，而与应用程序使用哪种样式无关。
• 通过使用文件选择器，可以应用特定于样式的调整，而无需创建对样式的硬依赖性。

预定义的通用颜色

 

属性

【Universal.accent : color】

• 该附加属性保留主题的强调色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为Universal.Cobalt。
• 在下面的示例中，突出显示的按钮的强调色更改为Universal.Orange：

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

• 注意：即使强调色可以是任何颜色，也建议使用一种预定义的通用颜色，该颜色经设计可与其他通用样式调色板很好地配合使用。

【Universal.background : color】

• 该附加属性保留主题的背景色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为特定主题（light or dark)
• 在以下示例中，窗格的背景色更改为Universal.Steel：

Pane {
    Universal.background: Universal.Steel

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

【Universal.foreground : color】

• 此附加属性保留主题的前景色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为特定主题（light or dark)）。
• 在下面的示例中，按钮的前景色设置为Universal.Pink：

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

【Universal.theme : enumeration】

• 此附加属性保留主题是浅色还是深色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 可用主题：

Universal.Light	浅色主题（默认）
Universal.Dark	黑暗主题
Universal.System	系统主题

• 将主题设置为System基于系统主题颜色可以选择浅色主题或深色主题。但是，在读取主题属性的值时，该值从不为System，而是实际的主题。
• 在下面的示例中，窗格和按钮的主题均设置为Universal.Dark：

Pane {
    Universal.theme: Universal.Dark

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

color color(enumeration predefined)

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

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

Material 

• Material 样式基于Google材质设计指南。

• 要运行具有Material样式的应用程序，请参阅《在Qt Quick Controls中使用样式》。
• 注意： Material样式不是本机Android样式。
  • Material样式是遵循Google Material Design指南的100％跨平台Qt快速控件样式实施。
  • 该样式可在任何平台上运行，并且在任何地方看起来或多或少都是相同的。
  • 由于可用的系统字体和字体呈现引擎的差异，可能会产生较小的差异。

Customization

• Material样式允许自定义五个属性theme, primary, accent, foreground, and background.

• 可以为任何窗口或项目指定所有属性，并且它们以与font相同的方式自动传播到子级。
• 在下面的示例中，窗口和所有三个单选按钮以紫色主题色显示在深色主题中：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

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

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

【配置文件】

Theme	指定默认的Material主题。该值可以是可用主题之一，例如"Dark"。
Variant	指定材料变体。材质设计有两个变体：为触摸设备设计的普通变体和为台式机设计的密集变体。密集变体对控件及其字体使用较小的尺寸。 该值可以是"Normal"或"Dense"。
Accent	指定默认的“材质”强调颜色。该值可以是任何颜色，但是建议使用例如预定义的“材质”颜色之一"Teal"。
Primary	指定默认的Material原色。该值可以是任何颜色，但是建议使用例如预定义的“材质”颜色之一"BlueGrey"。
Foreground	指定默认的“材质前景色”。例如，该值可以是任何颜色，也可以是预定义的“材质”颜色之一"Brown"。
Background	指定默认的“材质”背景色。例如，该值可以是任何颜色，也可以是预定义的“材质”颜色之一"Grey"。

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

【环境变量】

QT_QUICK_CONTROLS_MATERIAL_THEME	指定默认的Material主题。该值可以是可用主题之一，例如"Dark"。
QT_QUICK_CONTROLS_MATERIAL_VARIANT	指定材料变体。材质设计有两个变体：为触摸设备设计的普通变体和为台式机设计的密集变体。密集变体对控件及其字体使用较小的尺寸。 该值可以是"Normal"或"Dense"。
QT_QUICK_CONTROLS_MATERIAL_ACCENT	指定默认的“材质”强调颜色。该值可以是任何颜色，但是建议使用例如预定义的“材质”颜色之一"Teal"。
QT_QUICK_CONTROLS_MATERIAL_PRIMARY	指定默认的Material原色。该值可以是任何颜色，但是建议使用例如预定义的“材质”颜色之一"BlueGrey"。
QT_QUICK_CONTROLS_MATERIAL_FOREGROUND	指定默认的“材质前景色”。例如，该值可以是任何颜色，也可以是预定义的“材质”颜色之一"Brown"。
QT_QUICK_CONTROLS_MATERIAL_BACKGROUND	指定默认的“材质”背景色。例如，该值可以是任何颜色，也可以是预定义的“材质”颜色之一"Grey"。

• 有关受支持的环境变量的完整列表，请参见Qt Quick Controls中的受支持的环境变量。

 

依赖性

• 必须单独导入“材料”样式才能访问特定于“材料”样式的属性。应该注意的是，无论对Material样式的引用如何，相同的应用程序代码都可以与其他任何样式一起运行。特定于材料的属性仅在应用程序以“材料”样式运行时才有效。
• 如果将Material样式导入到始终加载的QML文件中，则必须与应用程序一起部署Material样式，以便能够运行该应用程序，而与运行该应用程序所使用的样式无关。通过使用文件选择器，可以应用特定于样式的调整，而无需创建对样式的硬依赖性。

预定义的材料颜色

• 即使主色和强调色可以是任何颜色，但仍建议使用一种预定义的颜色，该颜色经设计可与“材质”样式调色板的其余部分很好地配合使用：
• 可用的预定义颜色：

• 使用深色主题时，默认情况下使用不同阴影的预定义颜色：

预定义的阴影

• 每种预定义的颜色都有几种不同的阴影可以传递给Material.color（）函数：

Material.Shade50

Material.Shade100

Material.Shade200

Material.Shade300

Material.Shade400

Material.Shade500

Material.Shade600

Material.Shade700

Material.Shade800

Material.Shade900

Material.ShadeA100

Material.ShadeA200

Material.ShadeA400

Material.ShadeA700

Variants

• Material样式还支持密集变体，其中按钮和委托等控件的高度较小，并且使用较小的字体。
• 建议在桌面平台上使用密集变体，在该平台上，鼠标和键盘可以实现更精确，更灵活的用户交互。
• 要使用密集变量，请将QT_QUICK_CONTROLS_MATERIAL_VARIANT环境变量设置为Dense，或Variant=Dense在qtquickcontrols2.conf文件中指定。两种情况下的默认值均为Normal。
• 下图说明了使用普通变体和密集变体时某些控件之间的区别：

• 请注意，上面显示的高度可能会根据跨平台的字体差异而有所不同。

附加属性

【Material.accent : color】

• 该附加属性保留主题的强调色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为Material.Pink。
• 在下面的示例中，突出显示的按钮的强调色更改为Material.Orange：

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

• 注意：即使强调色可以是任何颜色，也建议使用一种预定义的“材料”颜色，该颜色被设计为可与“材料”样式调色板的其余部分很好地配合使用。

【Material.background : color】

• 该附加属性保留主题的背景色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为特定主题（浅色或深色）。
• 在下面的示例中，按钮的背景色更改为Material.Teal：

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

【Material.elevation : int】

• 此附加属性保留控件的高程。海拔越高，阴影越深。该属性可以附加到任何控件，但并非所有控件都可以使高程可视化。
• 默认值是特定于控件的。
• 在下面的示例中，将窗格的高程设置为6

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

【Material.foreground : color】

• 此附加属性保留主题的前景色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认值为特定主题（浅色或深色）。
• 在下面的示例中，按钮的前景色设置为Material.Pink：

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

【Material.primary : color】

• 该附加属性保留主题的原色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 默认情况下，原色用作ToolBar的背景色。
• 默认值为Material.Indigo。
• 注意：即使主要颜色可以是任何颜色，也建议使用一种预定义的“材料”颜色，该颜色经设计可与“材料”样式调色板的其余部分很好地配合使用。

【Material.theme : enumeration】

• 此附加属性保留主题是浅色还是深色。该属性可以附加到任何窗口或项目。该值将传播给子代。
• 可用主题：

Material.Light	浅色主题（默认）
Material.Dark	黑暗主题
Material.System	系统主题

• 将主题设置为System基于系统主题颜色可以选择浅色主题或深色主题。但是，在读取主题属性的值时，该值从不为System，而是实际的主题。
• 在下面的示例中，窗格和按钮的主题均设置为Material.Dark：

Pane {
    Material.theme: Material.Dark

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

附加属性

color color(enumeration predefined, enumeration shade)

• 附加方法返回指定的预定义“材质”颜色和给定阴影的有效颜色值。如果省略，shadow参数默认为Material.Shade500。

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