vs2008编译QT开源项目--太阳神三国杀源码分析（三） 皮肤

太阳神三国杀的界面很绚丽,界面上按钮的图标,鼠标移入移出时图标的变化,日志和聊天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 ;//设置边框显示的图片
    background-color: rgba(43,45,31,120);//设置背景色,注意使用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时的效果
{
     background-color: rgba(0,0,0,200);
}

QScrollBar:sub-page //QScrollBar状态为sub-page时的效果
{
     background-color: rgba(0,0,0,200);
}

 QScrollBar::add-line:vertical  {  //::表示子控件  :表示所处状态

     background-color: rgba(43,45,31,200);
     height: 15px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical  {//::表示子控件  :表示所处状态

     background-color: rgba(43,45,31,200);
     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生效
    background-color: rgba(20,20,20,200);
    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"]{  //中括号指定属性值,只有属性值满足,效果才生效
    background-color: rgba(43,63,53,100);
    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;
}