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定义
我推荐一个关于CSS学习的属性查找的中文网站
其中类名可以更进一步细化成控件里面的子控件，子类名它用::与前面类隔开
|
QComboBox::drop-down {
image:url(dropdown.png)
}
QListWidget::item{
color:yellow;
}
|
上面两例中，第一例表示下拉列表里面的在下拉按钮定制，第二例是对LIST控件的列对象的控制。不同的控件可以定制哪一些子控件，可以参考
<>这里有完整的示例
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的官网下载一些现成的皮肤进入改造来加入
我用 这个不规则的皮肤来定义我的qplayer
阅读(4161) | 评论(0) | 转发(0) |
