qml使用Material主题(Styling Qt Quick Controls 2)

Qt Quick为开发者提供了很大的自由度,那对于一些控件风格传统的项目中,有没有类似于皮肤之类的东西可以提高开发效率而不用每个控件都自己DIY呢?答案就是

Styling Qt Quick Controls 2

Qt Quick Controls2提供了以下几种可供选择的风格

Default Style(默认样式)

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

Fusion Style(融合样式)

Fusion风格是一种平台无关的风格,它为Qt快速控制提供了面向桌面的外观。

Imagine Style(贴图样式)

Imaging样式是基于图片资源实现的。该样式提供了一组默认的图像,但是通过使用预定义的命名约定提供具有贴图的目录,可以轻松地更改贴图样式。

Material Style(谷歌材料风格)

Material样式根据谷歌提出的Material Design设计规则,提供了一套界面精美诱人的风格方案

Universal Style(微软通用风格)

Universal 样式根据微软提出的Universal Design设计规则,提供了一套界面精美诱人的风格方案。

 

配置Material界面风格

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

QQuickStyle::setStyle("Material");

另一种配置程序界面风格的方法是使用配置文件qtquickcontrols2.conf

该配置文件最终会作为程序的资源文件被编译进程序当中,下面的配置代码指定了目标程序使用Material Design规则,并且主题为light。为了使该配置文件生效,该文件必须被编译进应用程序中,作为程序的资源文件

[Controls]
Style=Universal

[Material]
Theme=Light
Accent=Teal
Primary=BlueGrey

该配置文件类似于Qt Style Sheets中的Qss文件,设置全局控件样式,当需要在某个控件单独设置时,在qml文件中,需要import QtQuick.Controls.Material 2.0,单独对控件进行设置

    CheckBox {
        Material.theme: Material.Light
        Material.accent: Material.Purple
        id: checkBox
        x: 187
        y: 26
        text: qsTr("Check Box")
    }

其附加属性有:

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

预定义的材料颜色

重点色和优选色可以是任何一种颜色,建议使用一种预先定义的颜色,这种颜色可以很好地与其他材质风格调色板配合使用:

可用的预定义的颜色表:

发布了6 篇原创文章 · 获赞 8 · 访问量 1109

猜你喜欢

转载自blog.csdn.net/zjgo007/article/details/104855648