目錄

1、表格控件QTableWidget和QTableView

2、滾動條QScrollBar

1、表格控件QTableWidget和QTableView

這個控件比較復雜，里面包含了滑動條、表頭（又細分為內(nèi)容區(qū)/空白區(qū)）、表格、整體、左上角按鈕等多種不同的元素，他們之間有復雜的疊層關(guān)系。需要通過各種“選擇器”來指定樣式的作用范圍。

本文由【暴躁的野生猿】發(fā)表于CSDN，如果有非法轉(zhuǎn)載，請幫忙舉報，謝謝。百度搜索暴躁的野生猿《QT各種控件常用樣式表qss示例》可找到本文的原文。

下面通過示例來一步步觀察他的疊層關(guān)系。首先使能表格的交替行：alternatingRowColors=true。

QTableView 
{/*整個表格區(qū)域最底層*/
    background: green;
   color:white;
}

效果如下：

發(fā)現(xiàn)這個綠色背景并沒有作用于整體，表頭部分仍然為白色，那是因為表頭在頂層，遮住了QTableView的綠色背景。

下面設(shè)置表頭背景色，黑色，半透明，透明度為50。按照預期，黑色半透明和QTableView的綠色疊加后，會形成深綠色。

QTableView 
{/*整個表格區(qū)域最底層*/
    background: green;
   color:white;
}
QHeaderView
{/*表頭整體樣式，包括水平表頭的右側(cè)空白區(qū)域，垂直表頭的下方空白區(qū)域*/
    background-color: rgba(0,0,0,50);
}

發(fā)現(xiàn)表頭區(qū)域并沒有全部變成深綠色，只有表頭的非文字區(qū)域（空白區(qū)域）變成了深綠色。這是因為表頭的文字區(qū)域，比空白區(qū)域的疊層更靠前，白色背景把深綠色給遮住了。下面繼續(xù)設(shè)置表頭的文字區(qū)域，設(shè)置為黑色半透明，透明度50。

QTableView 
{/*整個表格區(qū)域最底層*/
    background: green;
   color:white;
}

QHeaderView
{/*表頭整體樣式，包括水平表頭的右側(cè)空白區(qū)域，垂直表頭的下方空白區(qū)域*/
    background-color: rgba(0,0,0,50);
}
QHeaderView::section 
{/*表頭有文字內(nèi)容的區(qū)域*/
     background-color: rgba(0, 0, 0, 50);
     color: white;
	border:none;
}

?

如上圖所示，表頭的文字區(qū)域，變成了顏色更深的深綠色，這是因為這個區(qū)域的顏色，實際上是3層顏色的疊加：QTableView整體的綠色+QHeadView表頭整體的黑色半透明+section表頭文字區(qū)域黑色半透明。

上圖左上角的按鈕還是白色，下面把他設(shè)置為黑色半透明：

QTableView 
{/*整個表格區(qū)域最底層*/
    background: green;
   color:white;
}
QHeaderView
{/*表頭整體樣式，包括水平表頭的右側(cè)空白區(qū)域，垂直表頭的下方空白區(qū)域*/
    background-color: rgba(0,0,0,50);
}
QHeaderView::section 
{/*表頭有文字內(nèi)容的區(qū)域*/
     background-color: rgba(0, 0, 0, 50);
     color: white;
	border:none;
}
QTableView QTableCornerButton::section 
{/*表格左上角按鈕*/
    border:none;
    background-color:  rgba(0, 0, 0, 50);;
}

發(fā)現(xiàn)他呈現(xiàn)為較深的綠色，說明他位于QTableView整體綠色的上方，層次和QHeadView表頭整體是同一層。

下面通過設(shè)置各個元素的邊框，來更直觀的看一下他們的包含與層次關(guān)系：

QTableView 
{/*整個表格區(qū)域最底層*/
    background: green;
   color:white;
	border: 5px solid red;
}

QHeaderView
{/*表頭整體樣式，包括水平表頭的右側(cè)空白區(qū)域，垂直表頭的下方空白區(qū)域*/
    background-color: rgba(0,0,0,50);
	border: 5px solid blue;
}
QHeaderView::section 
{/*表頭有文字內(nèi)容的區(qū)域*/
     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;
}

?表頭部分，還支持選中不同的區(qū)域，如第一個、最后一個、中間部分、下一個等

例如：垂直表頭的第1格，，水平表頭中間的所有格，設(shè)置為紅色邊框：

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

效果如下：

2、滾動條QScrollBar

滾動去QScrollArea、列表區(qū)QListView QListWidget等里面都有滾動條

  QScrollBar:horizontal {
/*整個滑動區(qū)域*/
    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 {
/*滑塊左右兩側(cè)的空白區(qū)域，點擊一下滾動一頁*/
      border: 3px solid red;
background: transparent;

  }

?文章來源地址http://www.zghlxwxcb.cn/news/detail-561465.html

?

到了這里，關(guān)于QT各種控件常用樣式表qss示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！