qml中Popup的overlay颜色 qml 样式

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.Shade50Material.Shade100Material.Shade200Material.Shade300Material.Shade400Material.Shade500Material.Shade600Material.Shade700Material.Shade800Material.Shade900Material.ShadeA100Material.ShadeA200Material.ShadeA400Material.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) }