QT QSS 使用

来源：互联网发布：vb可以开发手机app吗编辑：程序博客网时间：2024/05/10 08:24

转自：http://blog.csdn.net/playstudy/article/details/8027892

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();        }

0 0