QT自定义精美换肤界面

Posted 老樊Lu码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了QT自定义精美换肤界面相关的知识，希望对你有一定的参考价值。

     Qt实际库里的自带组件的样式是系统标准的，要得到更好看的界面，光靠库里的样式是远远不够的，样式表的出现使得使用Qt做出更加漂亮的界面成为可能。

1. Qt样式表的动态加载：

代码如下：

QFile file(":/qss/stylesheet.qss");  
file.open(QFile::ReadOnly);  
QString styleSheet = QLatin1String(file.readAll());  
qApp->setStyleSheet(styleSheet);  
file.close();
        通过以上代码，可将Qt的样式表动态加载到一个.qss的样式表文件中，从而更加方便代码的调试。

2.QPushButton样式


代码如下：

QWidget#centralWidget{
       border-style:solid;
	   background: transparent;
	   background-color:#DEB887;
	   
}

QPushButton#pushButton{
       background-color:#F08080;
       
}

QPushButton#pushButton_2{

       background-color:#FF8C00;
	   border-radius: 10px; 
}

QPushButton#pushButton_3{
     
       background-color:#4169E1;
}

QPushButton#pushButton_1{
       
       background-image: url(:qss/Skin/black/tools/tab-image.png);
       border-radius: 10px; 
	   border: 2px groove gray;
	   border-style: outset;
}

3.QListWidget样式


代码如下：


QWidget#centralWidget{
       border-style:solid;
	   background: transparent;
	   background-color:#B8B8B8;
	   
}

QListWidget#listWidget{
      background:rgba(210,240,250,255);
	  color:#00CCFF;border:0px solid gray;
	  padding:0px -2px 5px 5px;}"  
                                 
      "QListWidget::item{width:94px;height:35px;border:0px solid gray;padding-left:8px;}
	  "QListWidget::item:!selected{}"  
	  "QListWidget::item:selected:active{background:#FFFFFF;color:#00CCFF;border-width:-1;}"  
	  "QListWidget::item:selected{background:#FFFFFF;color:#00CCFF;}"  
                                
	  }
    自选股1和自选股3是自定义状态，自选股2是选中状态。

4.QComboBox样式


代码如下：

QWidget#centralWidget{
       border-style:solid;
	   background: transparent;
	   background-color:#B8B8B8;
	   
}

QComboBox#comboBox{
      color:#00CCFF;
	  border: 1px solid gray;
      border-radius: 3px;
	  height: 25px; 
	  padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容
	  subcontrol-origin: padding;
      subcontrol-position: top right;
      width: 20px;
      color:#00CCFF;
	  border:0px solid gray;
	  border:1px solid #d7d7d7; 
	  border-radius: 3px; 
	  padding: 1px 18px 1px 3px;   
	  QComboBox:editable{ background: white; };  
      QComboBox:!editable{ background: #fbfbfb; color:#666666};
      QComboBox::drop-down{ subcontrol-origin: padding;}; 
      subcontrol-position: top right;
      width: 22px; 
	  border-left-width: 1px;
      border-left-color: #c9c9c9;
      border-left-style: solid; /* just a single line */
      border-top-right-radius: 3px; /* same radius as the QComboBox */
      border-bottom-right-radius: 3px; 
	  
	  QComboBox::down-arrow { image: url(:/down.png);} ;
      QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px;} ;
  	  QComboBox{font-size: 11px} ;
      QComboBox:!selected{color: red};
      QComboBox:selected:active{background-color: orange }; 
	  QComboBox:selected{color: orange}; 
}
5. QProgressBar样式


代码如下：

QWidget#centralWidget{
       border-style:solid;
	   background: transparent;
	   background-color:#B8B8B8;
	   
}

QProgressBar#progressBar{
      border:none;
      background:#696969;
      border-radius:5px;
      text-align:center;
}

QProgressBar::chunk {

      background-color:rgb(58, 154, 255);
      border-radius:4px;
	 
}
6. QLineEdit样式



代码如下：

QLinlineEdit::lineEdit{
      enabled{color:#1964F};
	  disabled{color:orange};
	  border:1px solid gray;
	  border-radius:5px;
	  padding:0px 10px 0px 20px;
	  background:yellow;
	  selection-background-color: darkgary;
	  background-image:url(:qss/Skin/black/tools/edit.png);
}

7.QScrollBar样式