Qt Quick Controls2 —Styling 不同风格切换

简述

Qt Quick Controls2 可以通过 Styling 实现非常简单的样式切换，Qt5.12 提供了一下： (“Default”, “Fusion”, “Imagine”, “Material”, “Universal”) 几种样式儿。

介绍

1、Default Design

Qt Quick Controls2的默认风格是一种朴素，轻量的风格，这种风格体现在控件的所有方面。其好处就是能够最大程度提高你的App性能

2、Material Design

Qt Quick还根据谷歌提出的Material Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源

3、Universal Design

Qt Quick还根据微软提出的Universal Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源

实现

1、源码中设置

配置应用程序界面风格的一种方法是在C++源文件的main.c中，通过QQuickStyle的静态方法setStyle来设置，比如下面的代码将App风格设置为Material Design

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);
    QQuickStyle::setStyle("Material");
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("availableStyles", QQuickStyle::availableStyles());
    engine.load(QUrl("qrc:/gallery.qml"));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

2、qtquickcontrols2.conf

另一种配置程序界面风格的方法是使用配置文件qtquickcontrols2.conf该配置文件最终会作为程序的资源文件被编译进程序当中，下面的配置代码指定了目标程序使用Material Design规则，并且主题为light。为了使该配置文件生效，该文件必须被编译进应用程序中，作为程序的资源文件

[Material]
Primary=#41cd52
Accent=#41cd52
Theme=System

[Universal]
Accent=#41cd52
Theme=System

细节

使用Material Style，需要import QtQuick.Controls.Material 2.0

其附加属性有：

1. accent，color类型，表示重点色，默认是Material.Pink

2. primary，color类型，表示优选色，默认是 Material.Indigo

3. backbround，color类型，表示背景色，默认由主题指定（light或者dark）

4. elevation，int类型，表示海拔高度，值越大，阴影越深，该值与具体控件相关

5. foreground，color类型，表示前景色，默认值由主题指定（light或者dark）

6. theme，枚举类型，表示主题，默认是Material.Light，也可修改为Material.Dark

所有的属性都可以被任何Item或者Window单独设置，且可以传递给子对象Item。可以在QML文档中设置，也可以在配置文件中设置全局的，但是在QML文档中设置的优先级更高

系统预定义的颜色有很多，并且在不同的主题下有不同的表现。

Material Style有一个附件方法：

color color(enumeration predefined, enumeration shade)

可以返回一个实际有效的color值，这个值由预定义的Material color和用户指定的阴影值给出，shade缺省为Material.Shade500

注意

• 通过QQuickStyle的静态方法setStyle设置的风格优先级最高
• 通过配置文件qtquickcontrols2.conf设置的风格优先级最低
• 尽管primary和accent的颜色可以为任何值，但是建议使用系统预定义的颜色