QT各种控件常用样式表qss示例

目录

1、表格控件QTableWidget和QTableView

2、滚动条QScrollBar

---

1、表格控件QTableWidget和QTableView

这个控件比较复杂，里面包含了滑动条、表头（又细分为内容区/空白区）、表格、整体、左上角按钮等多种不同的元素，他们之间有复杂的叠层关系。需要通过各种“选择器”来指定样式的作用范围。

本文由【暴躁的野生猿】发表于CSDN，如果有非法转载，请帮忙举报，谢谢。百度搜索暴躁的野生猿《QT各种控件常用样式表qss示例》可找到本文的原文。

下面通过示例来一步步观察他的叠层关系。首先使能表格的交替行：alternatingRowColors=true。

QTableView 
{/*整个表格区域最底层*/
    background: green;
   color:white;
}

效果如下：

发现这个绿色背景并没有作用于整体，表头部分仍然为白色，那是因为表头在顶层，遮住了QTableView的绿色背景。

下面设置表头背景色，黑色，半透明，透明度为50。按照预期，黑色半透明和QTableView的绿色叠加后，会形成深绿色。

QTableView 
{/*整个表格区域最底层*/
    background: green;
   color:white;
}
QHeaderView
{/*表头整体样式，包括水平表头的右侧空白区域，垂直表头的下方空白区域*/
    background-color: rgba(0,0,0,50);
}

发现表头区域并没有全部变成深绿色，只有表头的非文字区域（空白区域）变成了深绿色。这是因为表头的文字区域，比空白区域的叠层更靠前，白色背景把深绿色给遮住了。下面继续设置表头的文字区域，设置为黑色半透明，透明度50。

QTableView 
{/*整个表格区域最底层*/
    background: green;
   color:white;
}
 
QHeaderView
{/*表头整体样式，包括水平表头的右侧空白区域，垂直表头的下方空白区域*/
    background-color: rgba(0,0,0,50);
}
QHeaderView::section 
{/*表头有文字内容的区域*/
     background-color: rgba(0, 0, 0, 50);
     color: white;
	border:none;
}

 

如上图所示，表头的文字区域，变成了颜色更深的深绿色，这是因为这个区域的颜色，实际上是3层颜色的叠加：QTableView整体的绿色+QHeadView表头整体的黑色半透明+section表头文字区域黑色半透明。

上图左上角的按钮还是白色，下面把他设置为黑色半透明：

QTableView 
{/*整个表格区域最底层*/
    background: green;
   color:white;
}
QHeaderView
{/*表头整体样式，包括水平表头的右侧空白区域，垂直表头的下方空白区域*/
    background-color: rgba(0,0,0,50);
}
QHeaderView::section 
{/*表头有文字内容的区域*/
     background-color: rgba(0, 0, 0, 50);
     color: white;
	border:none;
}
QTableView QTableCornerButton::section 
{/*表格左上角按钮*/
    border:none;
    background-color:  rgba(0, 0, 0, 50);;
}

发现他呈现为较深的绿色，说明他位于QTableView整体绿色的上方，层次和QHeadView表头整体是同一层。

下面通过设置各个元素的边框，来更直观的看一下他们的包含与层次关系：

QTableView 
{/*整个表格区域最底层*/
    background: green;
   color:white;
	border: 5px solid red;
}
 
QHeaderView
{/*表头整体样式，包括水平表头的右侧空白区域，垂直表头的下方空白区域*/
    background-color: rgba(0,0,0,50);
	border: 5px solid blue;
}
QHeaderView::section 
{/*表头有文字内容的区域*/
     background-color: rgba(0, 0, 0, 50);
     color: white;
	border: 5px solid yellow;
}
QTableView QTableCornerButton::section 
{/*表格左上角按钮*/
    border:none;
    background-color:  rgba(0, 0, 0, 50);
	border: 5px solid white;
}
QTableView::item 
{/*每个单元格*/
    background: gray;
	border: 5px solid purple;
}

 表头部分，还支持选中不同的区域，如第一个、最后一个、中间部分、下一个等

例如：垂直表头的第1格，，水平表头中间的所有格，设置为红色边框：

QHeaderView::section:first:vertical
{/*垂直表头第一格文字区域*/
	background-color: rgba(0,0,0,50);
	border: 5px solid red;
}
QHeaderView::section:middle:horizontal
{/*水平表头所有的中间格文字区域*/
	background-color: rgba(0,0,0,50);
	border: 5px solid red;
}

效果如下：

2、滚动条QScrollBar

滚动去QScrollArea、列表区QListView QListWidget等里面都有滚动条

  QScrollBar:horizontal {
/*整个滑动区域*/
    border:5px solid green;
      background: cyan;
      height: 35px;
      margin: 0px 60px 0 60px;/*左右留边，给左右箭头按钮留出空间*/
  }
 
  QScrollBar::handle:horizontal {
/*滑块*/
border:3px solid white;
      background: gray;
      min-width: 5px;
 
  }
 
 
  QScrollBar::add-line:horizontal {
/*水平+按钮，也即右按钮*/
      background: blue;
      subcontrol-position: right;
      subcontrol-origin: margin;
      border: 2px solid black;
      width: 26px;
    position: absolute;
	right:0px;/*右按钮的右边紧贴控件的边沿*/
  }
 
  QScrollBar::sub-line:horizontal {
/*水平-按钮，也即左按钮，点击一下滚动一行*/
      background: magenta;
      width: 26px;
      subcontrol-position: top left;
      subcontrol-origin: margin;
      border: 2px solid black;
      left:10px;/*左按钮的左边不靠边*/
 
  }
 
  QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
   /*左右按钮里面的箭头符号*/   
width: 8px;
      height: 8px;
      background: white;
	
  }
 
  QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
/*滑块左右两侧的空白区域，点击一下滚动一页*/
      border: 3px solid red;
background: transparent;
 
  }