全面拥抱 Qt 4.6 + 让Qt应用程序支持换肤(Skin)功能

转自：http://www.linuxidc.com/Linux/2010-12/30223p6.htm

Qt程序一直给人的印象是正规的GUI程序的模样.在嵌入式Linux下,Qtopia的桌面看起来跟WinCE桌面没有什么两样.相对IPHONE那样的漂亮界面.实在没有什么吸引力.

因此很多嵌入式开发人员是采用自行贴图来实现比较美观的界面,但是这样实现比较烦琐,这意味着你自己实现消息循环,传递等等很多基础的工作.工程量相当惊人.Qtopia也演示了如何贴图来实现一个mediaPlayer.方法也是非常繁琐.



1.Qt4的Skin原理

自Qt 4.2后.情况发生重大的变化.QWidget的方法增加setStyleSheet方法.它可以让开发者使用类似于HTML设计的css语法来改变应用程序的外观.包括颜色,字体,背景等.其中通过改变背景图片.并且把控件设为透明.即可以实现换肤功能.因为它是QWidget的方法,这意味着,在QT4中,所有可视控件都支持换肤功能了.



这样让QT4 开发花哨的嵌入式程序就比较简单了.开发者绘制好皮肤图片后,用setStyleSheet()设置好.而整个程序的框架,消息处理仍然由QT来处理.





2.setStyleSheet 语法



setStyleSheet 采用QStyle的语法



QStyle格式相当简单,格式为



类名 {

配置项1;

配置项2;

...

}



类名一般是标准控件类,QPushButton,也是如下名字 QListWidget::item,





其中配置采用标准的CSS语法,会HTML设计的人一看就明白.如

QPushButton { color: red ; border:none; margin-right:20px ; font:bold 15px;}

上述语法表示是QPushButton类定制,使用红色,没有边框,右边留空20像素,字体采用加粗的15号字.完整的定义可以参考CSS定义
http://www.w3.org/Style/CSS/
我推荐一个关于CSS学习的属性查找的中文网站 http://www.w3school.com.cn/css/index.asp
其中类名可以更进一步细化成控件里面的子控件，子类名它用::与前面类隔开

QComboBox::drop-down { image:url(dropdown.png) } QListWidget::item{ color:yellow; }

上面两例中，第一例表示下拉列表里面的在下拉按钮定制，第二例是对LIST控件的列对象的控制。不同的控件可以定制哪一些子控件，可以参考

<<Qt Style Sheets Examples>>这里有完整的示例
http://doc.trolltech.com/4.6/stylesheet-examples.html
2.2 换肤的格式

换图片的话一般采用如下定义

QToolButton{ background-image:url(pic/play.png); border:none background-color:transparent; }

其中的pic/play.png将会显示在界面上的按钮的位置.

为了精确的定制界面可以用下列参数来控制控件的坐标和大小

QFrame { position:absolute; width:480px; height:227px; left:100px; top:20px; };

QT窗口默认是有标题栏和边框的，这样显示出来会破坏皮肤的效果，所以一般支持皮肤的程序在启动时要把边框去掉。

一般是在窗口的构造函数调用setWindowFlags(),参见如下语句

setWindowFlags(Qt::WindowStaysOnTopHint | Qt::FramelessWindwHint);

2.3 动态效果

在具体设计时,往往还要采用行为定义.比如按下某个按钮时采用某一个图片,光标移到某个控件上，界面发生变化等。

QStyle 中，称某一个控件的动态行为称为Pseudo-States(伪状态）,它是用类名后面接:来表示。

QPushButton:pressed { background-image:url(pic/hit.png); }

上例是定义按钮按下时采用哪一个图片

QPushButton:hover { color: white } QRadioButton:!hover { color: red } QCheckBox:hover:checked { color: white; } QPushButton:hover:!pressed { color: blue; }

上面几个例子中，分别表示

第一个表示当光标划过QPushButon时，颜色变红。第二个表示当光标没有划过时，颜色为红色。第三个表示光标划过QCheckBox时，如果打上标记的，则变红。第四个表示当光标划过QPushButon时，如果没有按下，则颜色变红。

3.qplayer的应用

我拿上一次的实例来加入皮肤功能。首先我从MPlayer的官网下载一些现成的皮肤进入改造来加入



我用 http://www.mplayerhq.hu/MPlayer/skins/handheld-1.0.tar.bz2 这个不规则的皮肤来定义我的qplayer