玩转Qml(3)-换皮肤

简介
效果预览
必要的基础
- QObject自定义属性
- 全局单例
实现
- 皮肤的配置和原理
- 皮肤选择器
- 带三角形尖尖的弹窗组件

简介

本文是《玩转Qml》系列文章的第三篇，涛哥将教大家，如何在Qml中实现动态换皮肤。顺带会分享一些Qt小技巧。

源码

《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick

github https://github.com/jaredtao/TaoQuick

访问不了或者速度太慢，可以用国内的镜像网站gitee

https://gitee.com/jaredtao/TaoQuick

效果预览

效果类似于网易云音乐

顺便说一下，这是涛哥创建的TaoQuick项目，后续的各种组件、效果会全部集中在这个项目里。

文章中涉及的代码，都会先贴出来。整个工程的代码，在积累到一定程度后，会开放在github上。

必要的基础

可能有读者会疑惑，涛哥前两篇文章还在讲如何封装基础组件，这第三篇直接就来换皮肤？是不是跨度有点大？

其实换皮肤是一个很基础的功能，如果要做最好在项目初期就做起来，后期想要做换皮肤会困难一些(工作量大)。

如果你的项目做了很多组件化的封装，再做换皮肤会轻松一些。

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 {QtObject {  //定义一个QtObject，相当于Qt/c++代码中的QObjectid: dataObjproperty string name: "Hello"   //这就定义了一个string类型的属性name，初始值设为"Hello"//定义完了，已经自带了onNameChanged信号。name被重新赋值时会触发信号//给这个信号写一个处理函数，就相当于连接上了槽函数。onNameChanged: {console.info("name:", name)}}...Button {...onClicked: {    //演示: 按钮按下时，修改前面QtObject的name属性dataObj.name = "World"; }}...
}

(哈哈，工作量和心理负担一下子减轻了很多，头发的数量也能保住了。再也不想回去写Qt/C++的属性了。)

全局单例

涛哥写了一个单独的qml文件，顶层就是一个QtObject类型，里面会有一大堆属性。

颜色、字体一类的配置都在这里。

// GlobalConfig.qml
import QtQuick 2.0
QtObject {property color titleBackground: "#c62f2f"   //标题栏的背景色property color background: "#f6f6f6"        //标题栏之外的部分的背景色property color reserverColor: "#ffffff"     //与背景色相反的对比色property color textColor: "black"           //文本颜色}

然后在main.qml中实例化它

// main.qml
Item {width: 800height: 600GlobalConfig {id: gConfig}...
}

Qml有个特性，子页面实例可以通过id访问父页面中的实例，读写其属性、调用其函数。

在main.qml中实例化的对象，相当于是全局的了，它的id是可以在所有main.qml的子页面中访问到的。

(当然还有一种方式，通过qmldir指定单例，这种留着后面再说)

实现

皮肤的配置和原理

下面是TaoQuick中使用的gConfig

// GlobalConfig.qml
QtObject {property color titleBackground: "#c62f2f"property color background: "#f6f6f6"property color reserverColor: "#ffffff"property color textColor: "black"property color splitColor: "gray"property int currentTheme: 0onCurrentThemeChanged: {var t = themes.get(currentTheme)titleBackground = t.titleBackgroundbackground = t.backgroundtextColor = t.textColor}readonly property ListModel themes: ListModel {ListElement {name: qsTr("一品红")titleBackground: "#c62f2f"background: "#f6f6f6"textColor: "#5c5c5c"}ListElement {name: qsTr("高冷黑")titleBackground: "#191b1f"background: "#222225"textColor: "#adafb2"}ListElement {name: qsTr("淑女粉")titleBackground: "#faa0c5"background: "#f6f6f6"textColor: "#5c5c5c"}ListElement {name: qsTr("富贵金")titleBackground: "#fed98f"background: "#f6f6f6"textColor: "#5c5c5c"}ListElement {name: qsTr(" 清爽绿")titleBackground: "#58c979"background: "#f6f6f6"textColor: "#5c5c5c"}ListElement {name: qsTr("苍穹蓝")titleBackground: "#67c1fd"background: "#f6f6f6"textColor: "#5c5c5c"}}
}

涛哥在所有的Page页面中，相关颜色设置都绑定到gConfig的相应属性上。

那么换皮肤，只需要修改gConfig中的颜色相关属性即可。因为修改属性时会触发change信号，而所有的Page都绑定了

gConfig的属性，会自动在发生change时重新读属性，修改后的颜色自动就生效了。

这里顺带说一下，主题的颜色相关属性越少越好，因为太多了不容易识别、不好维护，

之前的文章《玩转Qml(1)-从按钮开始》中提到的Qt.lighter和Qt.darker,

就是一种减少颜色属性数量的神器。

皮肤选择器

再来看一下，涛哥参考网易云音乐做的皮肤选择器

TImageBtn {     //图片按钮，参考文章1width: 20height: 20anchors.verticalCenter: parent.verticalCenterimageUrl: containsMouse ? "qrc:/Image/Window/skin_white.png" : "qrc:/Image/Window/skin_gray.png"onClicked: {skinBox.show()}TPopup {    //自定义的弹窗，带三角尖尖的那个。id: skinBoxbarColor: gConfig.reserverColorbackgroundWidth: 280backgroundHeight: 180contentItem: GridView {anchors.fill: parentanchors.margins: 10model: gConfig.themescellWidth: 80cellHeight: 80delegate: Item {width: 80height: 80Rectangle { //表示主题色的色块anchors.fill: parentanchors.margins: 4height: widthcolor: model.titleBackground}Rectangle { //主题色边框，鼠标悬浮时显示anchors.fill: parentcolor: "transparent"border.color: model.titleBackgroundborder.width: 2visible: a.containsMouse}Text {  //主题名字anchors {left: parent.leftbottom: parent.bottomleftMargin: 8bottomMargin: 8}color: "white"text: model.name}Rectangle { //右下角圆圈圈，当前选中的主题x: parent.width - widthy: parent.height - heightwidth: 20height: widthradius: width / 2color: model.titleBackgroundborder.width: 3border.color: gConfig.reserverColorvisible: gConfig.currentTheme === index}MouseArea { //鼠标状态id: aanchors.fill: parenthoverEnabled: trueonClicked: {    //切主题操作gConfig.currentTheme = index}}}}}
}

带三角形尖尖的弹窗组件

// TPopup.qml
import QtQuick 2.9
import QtQuick.Controls 2.5
Item {id: rootanchors.fill: parentproperty alias popupVisible: popup.visibleproperty alias contentItem: popup.contentItemproperty color barColor: "white"property alias backgroundItem: backgroundproperty real backgroundWidth: 200property real backgroundHeight: 160property color borderColor:  barColorproperty real borderWidth: 0property real verticalOffset: 20//矩形旋转45度，一半被toolTip遮住(重合)，另一半三角形和ToolTip组成一个带箭头的ToolTipRectangle {id: barvisible: popup.visiblerotation: 45width: 16height: 16color: barColor//水平居中anchors.horizontalCenter: parent.horizontalCenter//垂直方向上，由ToolTip的y值，决定位置anchors.verticalCenter: parent.bottomanchors.verticalCenterOffset: verticalOffset}Popup {id: popupwidth: backgroundWidthheight: backgroundHeightbackground: Rectangle {id: backgroundcolor: barColorradius: 8border.color:borderColorborder.width: borderWidth}}function show() {popup.x = (root.width - popup.width) / 2popup.y = root.height + verticalOffsetpopupVisible = true}function hide() {popupVisible = false}
}