标签：
太阳神三国杀的界面很绚丽,界面上按钮的图标,鼠标移入移出时图标的变化,日志和聊天Widget的边框和半透明等效果,既可以通过代码来控制,也可以使用皮肤文件qss进行控制.下面我们分析一下三国杀的qss文件.
在main.cpp中可以看到如下几句关键代码:
QDir::setCurrent(qApp->applicationDirPath());//设置当前目录为程序的可执行文件所在目录
//设置皮肤
QFile file("sanguosha.qss");
if(file.open(QIODevice::ReadOnly)){
QTextStream stream(&file);
qApp->setStyleSheet(stream.readAll());
}
首先设置当前路径,并在当前路径下加载sanguosha.qss文件,将其内容全部读取出来作为qApp->setStyleSheet的参数,从而设置了应用程序的皮肤.
要学习使用qss,首先需要了解qss中的选择器语法,常用的有如下几类:
1 控件类名#控件名称 指定控件类,控件名称 后跟效果描述
2 控件类名:状态 指定控件类,控件的状态 后跟效果描述 如按钮的鼠标悬停状态等等
3 控件类名::子控件类名 指定控件类,子控件类名 后跟效果描述 如分组框中的按钮
4 控件类名 直接指定控件类 后跟效果描述 将影响程序中所有该类控件的显示效果
5 控件名称[属性名称=属性值] 指定控件类,控件实例的属性值 后跟效果描述 只影响控件实例中属性值符合条件的控件显示效果
下面看看sanguosha.qss文件的内容,并逐一解释.
QProgressBar{
color : solid gray;
border: 2px solid gray;
border-radius: 5px;
background: transparent;
padding: 0px;
text-align : center ;
}
QProgressBar::chunk{ //设置进度块的背景颜色
background: #B22222;
}
QTextEdit{
border: 10px;
border-image: url(image/system/border.png)10 10 10 10 ;//设置边框显示的图片
//设置背景色,注意使用rgba,有透明效果
}
QTextEdit[description="true"]{//对QTextEdit控件,而且其description属性必须设置为true的实例生效
border: 10px;
border-image: none;
background-color: rgba(255,255,255,255);
}
QTextEdit QScrollBar:vertical { //这是一个子控件选择器,设置QTextEdit的子控件QScrollBar--状态为垂直时的效果
margin: 22px 0 22px 0;
}
QScrollBar:add-page //QScrollBar状态为add-page时的效果
{
}
QScrollBar:sub-page //QScrollBar状态为sub-page时的效果
{
background-color: rgba(0,0,0,200);
}
QScrollBar::add-line:vertical { //::表示子控件 :表示所处状态
height: 15px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {//::表示子控件 :表示所处状态
height: 15px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::handle:vertical {//::表示子控件 :表示所处状态
border : 2px solid gray;
border-radius: 6px;
background-color: solid gray;
min-height : 12px;
}
QScrollBar::up-arrow:vertical //::表示子控件 :表示所处状态
{
border-image: url(image/system/button/scroll-up-arrow.png);
}
QScrollBar::down-arrow:vertical //::表示子控件 :表示所处状态
{
border-image: url(image/system/button/scroll-down-arrow.png);
}
QLineEdit#chat_edit{ //控件类名称#控件名称 表示只针对叫做chat_edit的QLineEdit生效
color: white;
border: 10px transparent;
height: 20px;
border-image: url(image/system/border.png)10 10 10 10 ;
}
QStatusBar::item {
border: 0px solid grey;
}
QStatusBar{
background-image: url(image/system/skill-dock.png);
color:white;
}
QMenu[private_pile="true"]{ //中括号指定属性值,只有属性值满足,效果才生效
border-radius: 5px;
color: white;
}
QPushButton[private_pile="true"]{ //中括号指定属性值,只有属性值满足,效果才生效
background-color: rgba(43,63,53,100);
border-radius: 5px;
color: white;
}
QPushButton[game_control="true"]{ //中括号指定属性值,只有属性值满足,效果才生效
border: 0px solid gray;
font: 12px;
border-radius: 5px;
padding: 6px 12px 6px 12px;
}
QPushButton#free-discard{ //指定一个按钮上的背景图
background-image: url(image/system/button/free-discard.png);
}
QPushButton#free-discard:disabled{ //指定一个按钮在disabled状态下的背景图
background-image: url(image/system/button/free-discard-disabled.png);
}
QPushButton#reverse-select{ //指定一个按钮上的背景图
background-image: url(image/system/button/reverse-select.png);
}
QPushButton#reverse-select:disabled{ //指定一个按钮在disabled状态下的背景图
background-image: url(image/system/button/reverse-select-disabled.png);
}
QPushButton#pause{
background-image: url(image/system/button/pause.png);
}
QPushButton#play{
background-image: url(image/system/button/play.png);
}
QPushButton#slow-down{
background-image: url(image/system/button/slow-down.png);
}
QPushButton#speed-up{
background-image: url(image/system/button/speed-up.png);
}
QPushButton#uniform{
background-image: url(image/system/button/uniform.png);
}
//由于skill_bar_container是状态栏的名称,而状态栏是自动生成的,因此需要在代码中特意设置一次状态栏的名称,以便于qss中设置样式.
//main_window->statusBar()->setObjectName("skill_bar_container");
#skill_bar_container QPushButton{ //#空间名称 子控件 指定skill_bar_container控件下包含的所有QPushButton类的效果
background-image: url(image/system/button/back.png);
border: 1px solid gray;
border-radius: 4px;
color: yellow;
font: 12px;
padding: 6px 12px 6px 12px;
}
#skill_bar_container QPushButton:disabled{ //指定skill_bar_container控件下包含的所有QPushButton类在disabled时的效果
background-image: url(image/system/button/back_shade.png);
border-radius: 4px;
color: white;
font: 12px;
}
#skill_bar_container QCheckBox{
border: 1px solid gray;
border-radius: 4px;
color: yellow;
font: 12px;
padding: 1px 12px 1px 8px;
}
#skill_bar_container QCheckBox::indicator{
height: 0px;
width: 0px;
}
#skill_bar_container QCheckBox:unchecked{
background-image: url(image/system/button/frequent_checkbox/unchecked.png);
}
#skill_bar_container QCheckBox:unchecked:hover{
background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);
}
#skill_bar_container QCheckBox:unchecked:pressed{
background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);
}
#skill_bar_container QCheckBox:checked{
background-image: url(image/system/button/frequent_checkbox/checked.png);
}
#skill_bar_container QCheckBox:checked:hover{
background-image: url(image/system/button/frequent_checkbox/checked_hover.png);
}
#skill_bar_container QCheckBox:checked:pressed{
background-image: url(image/system/button/frequent_checkbox/checked_press.png);
}
#skill_bar_container QComboBox{
background-image: url(image/system/button/back2.png);
border: 1px solid gray;
border-radius: 3px;
color: white;
padding: 1px 18px 1px 3px;
}
#skill_bar_container QComboBox:on{
padding-left: 4px;
padding-top: 3px;
}
#skill_bar_container QComboBox::drop-down{
border-bottom-right-radius: 3px;
border-left-color: darkgray;
border-left-style: solid;
border-left-width: 1px;
border-top-right-radius: 3px;
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
}
#skill_bar_container QComboBox::down-arrow:on{
left: 1px;
top: 1px;
}
http://blog.csdn.net/henreash/article/details/7868137
vs2008编译QT开源项目--太阳神三国杀源码分析（三） 皮肤
标签：
原文地址：http://www.cnblogs.com/findumars/p/5290150.html
