QT 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,255);
}

QTextEdit[description="true"]{
    border: 10px;
    border-image: none;
    background-color: rgba(255,255,255,255);
}

QTextEdit QScrollBar:vertical  {
     margin: 22px 0 22px 0;
}

QScrollBar:add-page
{
     background-color: rgba(0,0,0,255);
}

QScrollBar:sub-page
{
     background-color: rgba(0,0,0,255);
}

 QScrollBar::add-line:vertical  {

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

 QScrollBar::sub-line:vertical  {

     background-color: rgba(43,45,31,255);
     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{
    background-color: rgba(20,20,20,255);
    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,200);
    border-radius: 1px;
    color: white;
}

QPushButton[private_pile="true"]{
    background-color: rgba(43,63,53,200);
    border-radius: 1px;
    color: white;
}

QPushButton[game_control="true"]{
    border: 0px solid gray;
    font: 12px;
    border-radius: 5px;
    padding: 6px 12px 6px 12px;
}

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 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{
    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;
}

设计Qt程序Ui的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟代码层分开，利于维护。

过程如下：

    1、建立文本文件，写入样式表内容，更改文件后缀名为qss；

    2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；

    3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

 

 

代码如下

QString qss;



    QFile qssFile(":/qss/css.qss");

    qssFile.open(QFile::ReadOnly);

    if(qssFile.isOpen())

    {

        qss = QLatin1String(qssFile.readAll());

        qApp->setStyleSheet(qss);

        qssFile.close();

    }

 

 

qss 代码如下：