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

预定义的材料颜色

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

可用的预定义的颜色表:

  • 7
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵喵叫的猴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值