欢迎访问mehome的博客

Tomorrow is another day.
Fork me on GitHub

Qt控件样式设置

一、简述

QSS：全称 Qt Style Sheets（Qt样式表），用于美化Qt程序界面，类似于CSS，但不如CSS强大，选择器和属性较少。Qt定制化CSS。

QSS可以通过控件对象的setStyleSheet方法设置控件样式。


二、控件样式设置

2.1边框线

2.1.1按钮QPushButton

  1 //线粗细：1px
  2 //线类型：solid实线
  3 border:1px solid;



2.2背景色/字体颜色

2.2.1表格表行头/列头颜色

行头颜色(行列交叉也设置背景颜色)：

  1 QHeaderView::section::horizontal,QTableCornerButton:section{ padding:3px; margin:0px; color:#DCDCDC;  border:1px solid #242424; border-left-width:0px; border-right-width:1px; border-top-width:0px; border-bottom-width:1px; background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252); } QTableWidget{background-color:white;border:none;}
  2 QTableWidget::item:hover{background-color:rgb(92,188,227,200)}
  3 QTableWidget::item:selected{background-color:#1B89A1}


列头颜色：

  1 QHeaderView::section::vertical,QTableCornerButton:section{ padding:3px; margin:0px; color:#DCDCDC;  border:1px solid #242424; border-left-width:0px; border-right-width:1px; border-top-width:0px; border-bottom-width:1px; background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252); } QTableWidget{background-color:white;border:none;}
  2 QTableWidget::item:hover{background-color:rgb(92,188,227,200)}
  3 QTableWidget::item:selected{background-color:#1B89A1}



2.3控件圆角弧度


  1 //角弧度，半径5的圆
  2 
  3 border-radius:5px;


2.4鼠标悬停颜色


  1 QHeaderView::section::horizontal,QTableCornerButton:section{ padding:3px; margin:0px; color:#DCDCDC;  border:1px solid #242424; border-left-width:0px; border-right-width:1px; border-top-width:0px; border-bottom-width:1px; background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252); } QTableWidget{background-color:white;border:none;}
  2 QTableWidget::item:hover{background-color:rgb(92,188,227,200)}
  3 QTableWidget::item:selected{background-color:#1B89A1}


三、示例


  1 /*
  2 tabelwidget*/
  3 QTableWidget{
  4 color:#DCDCDC;
  5 background:#444444;
  6 border:1px solid #242424;
  7 alternate-background-color:#525252;/*交错颜色*/
  8 gridline-color:#242424;
  9 }
 10 
 11 /*选中item*/
 12 QTableWidget::item:selected{
 13 color:#DCDCDC;
 14 background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
 15 }
 16 
 17 /*
 18 悬浮item*/
 19 QTableWidget::item:hover{
 20 background:#5B5B5B;
 21 }
 22 /*表头*/
 23 QHeaderView::section{
 24 text-align:center;
 25 background:#5E5E5E;
 26 padding:3px;
 27 margin:0px;
 28 color:#DCDCDC;
 29 border:1px solid #242424;
 30 border-left-width:0;
 31 }
 32 
 33 
 34 
 35 /*表右侧的滑条*/
 36 QScrollBar:vertical{
 37 background:#484848;
 38 padding:0px;
 39 border-radius:6px;
 40 max-width:12px;
 41 }
 42 
 43 /*滑块*/
 44 QScrollBar::handle:vertical{
 45 background:#CCCCCC;
 46 }
 47 /*
 48 滑块悬浮，按下*/
 49 QScrollBar::handle:hover:vertical,QScrollBar::handle:pressed:vertical{
 50 background:#A7A7A7;
 51 }
 52 /*
 53 滑块已经划过的区域*/
 54 QScrollBar::sub-page:vertical{
 55 background:444444;
 56 }
 57 
 58 /*
 59 滑块还没有划过的区域*/
 60 QScrollBar::add-page:vertical{
 61 background:5B5B5B;
 62 }
 63 
 64 /*页面下移的按钮*/
 65 QScrollBar::add-line:vertical{
 66 background:none;
 67 }
 68 /*页面上移的按钮*/
 69 QScrollBar::sub-line:vertical{
 70 background:none;
 71 }
 72


四、相关参考


posted @ 2022-04-22 01:47  mehome  阅读(759)  评论(0)  编辑  收藏  举报