简介本文是《Qml组件化编程》系列文章的第三篇,涛哥将教大家,如何在Qml中实现动态换皮肤。顺带会分享一些Qt小技巧。 文章主要发布在涛哥的博客 和 知乎专栏-涛哥的Qt进阶之路。 效果预览效果类似于网易云音乐 ![]() 顺便说一下,这是涛哥创建的TaoQuick项目,源码在github: github.com/jaredtao/TaoQuick 必要的基础 可能有读者会疑惑,涛哥前两篇文章还在讲如何封装基础组件,这第三篇直接就来换皮肤?是不是跨度有点大? 其实换皮肤是一个很基础的功能,如果要做最好在项目初期就做起来,后期想要做换皮肤会困难一些(工作量大)。 如果你的项目做了很多组件化的封装,再做换皮肤会轻松一些。 QObject自定义属性Qml中有一个类型叫QtObject,涛哥非常喜欢使用这个类型。 以前在写Qt/C++代码中的自定义QObject时,经常需要写一些自定义的Q_PROPERTY,以及实现set、get函数、change信号 如果纯手工写,挺累人的,涛哥曾写过自动生成器,相信很多人也写过类似的工具。 后来涛哥发现,QtCreator有自动生成的功能,只要写上Q_PROPERTY那一行,再用右键菜单生成即可, 高效率人士也可以使用快捷键,光标放在Q_PROPERTY上,按Alt + Enter。 ![]() 有时候需要把set函数的参数改成const T &类型来减少内存拷贝,并把函数实现移动到cpp文件中。(这都是C++的诟病) 然而,在Qml中,有更加方便的QtObject, Item { (哈哈,工作量和心理负担一下子减轻了很多,头发的数量也能保住了。再也不想回去写Qt/C++的属性了。) 全局单例涛哥写了一个单独的qml文件,顶层就是一个QtObject类型,里面会有一大堆属性。 颜色、字体一类的配置都在这里。 // GlobalConfig.qml 然后在main.qml中实例化它 // main.qml Qml有个特性,子页面实例可以通过id访问父页面中的实例,读 写其属性、调用其函数。 在main.qml中实例化的对象,相当于是全局的了,它的id是可以在所有main.qml的子页面中访问到的。 (当然还有一种方式,通过qmldir指定单例,这种留着后面再说) 实现皮肤的配置和原理下面是TaoQuick中使用的gConfig // GlobalConfig.qml 涛哥在所有的Page页面中,相关颜色设置都绑定到gConfig的相应属性上。 那么换皮肤,只需要修改gConfig中的颜色相关属性即可。因为修改属性时会触发change信号,而所有的Page都绑定了 gConfig的属性,会自动在发生change时重新读属性,修改后的颜色自动就生效了。 这里顺带说一下,主题的颜色相关属性越少越好,因为太多了不容易识别、不好维护, 文章1 Qml组件化编程1-按钮的定制与封装 中提到的Qt.lighter和Qt.darker就是一种减少颜色属性数量的神器。 皮肤选择器再来看一下,涛哥参考 网易云音乐 做的皮肤选择器 TImageBtn { //图片按钮,参考文章1 带三角形尖尖的弹窗组件// TPopup.qml ---------------------------------------------------------------------------------------------------------------------- 我们尊重原创,也注重分享,文章来源于微信公众号:Qt进阶之路,建议关注公众号查看原文。如若侵权请联系qter@qter.org。 ---------------------------------------------------------------------------------------------------------------------- |