QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）

通用：

1. background-image:设置背景图片（根据图片大小）

2. border-image:设置背景图片（根据控件大小）

3. background-color:设置背景颜色

4. border-color:设置边框颜色

5. color:设置字体颜色

6. border:设置边框  例:border:1px solid red;

7. border-radius:设置边框圆角 /*左上 右上 右下 左下*/    border-top-left-radius:设置单个圆角

8. font：设置字体

9. text-align: 设置字体水平对齐  left:靠左  center:居中  right:靠右

10. image-position: 设置图片水平对齐  left:靠左  center:居中  right:靠右

11. padding:设置内边框距离

12. margin:设置外边框距离

一、QPushButton按钮

按钮按下样式

QPushButton::pressed{
background-color: rgba(164, 173, 179, 0.8);
border:0;
color:black;
}

按钮不可用状态下的样式

QPushButton:disabled{
border: 1 solid rgba(154, 154, 154, 1);
font:400 25px;
color:rgba(154, 154, 154, 1);
border-radius:5px;
}

二、QRadioButton/QCheckBox单选按钮

设置按钮未选中时的样式

QRadioButton::indicator::unchecked {

border-image: url(:/images/uncheck.png);

}

设置按钮选中时的样式

QRadioButton::indicator::checked {

border-image: url(:/images/check.png);

}

设置按钮的宽度和高度

QRadioButton::indicator {width: 20px;height: 20px;}

当多个 QRadioButton属于同一个父类时，取消选中没有作用，可尝试下面方法：

ui->radioButton->setAutoExclusive(false);
ui->radioButton->setChecked(false);
ui->radioButton->setAutoExclusive(true);

三、QScrollBar滚动条

设置垂直滑块整体

QScrollBar:vertical{

background:#02123e;//背景色

padding-top:18px;//上预留位置（放置向上箭头）

padding-bottom:18px;//下预留位置（放置向下箭头）

border:1px solid #083863;//分割线

}

设置滑块样式

QScrollBar::handle:vertical{

background:#02123e;//滑块颜色

min-height:80px;//滑块最小高度

}

设置向下按钮

QScrollBar::add-line:vertical{

background:02123e;

border:1px solid #083863;

}

设置向上按钮

QScrollBar::sub-line:vertical{

background:02123e;

border:1px solid #083863;

}

设置滚动条的增加页区域

QScrollBar::add-page:vertical{

background:#053c75;

}

设置滚动条的减少页区域

QScrollBar::sub-page:vertical{

background:#053c75;

}

四、QTableWidget/QTableView表格

设置每个单独的标题区域

QHeaderView::section{

border:none;

background:rgb(3, 24, 63);

color: #0e9ded;

font: 13pt “Arial”

}

设置左上角拐点按钮

QTableCornerButton::section{

background-color:red;

}

设置表格

QTableView{

selection-background-color:#0672dc;//设置选中颜色

alternate-background-color: #0c2c59;//设置交替背景色

}

选中样式

QTableWidget::item:selected{

background-color:blue;

color:white;

}

设置交替背景色需设置下面属性为true

setAlternatingRowColors(true);//设置使用交替背景

设置滚动条样式见上述滚动条。

表格其他设置

verticalHeader()->setVisible(false);//设置行标题不可见

setFrameShape(QFrame::NoFrame); //设置无边框

setShowGrid(false); //设置不显示格子线

setEditTriggers(QAbstractItemView::NoEditTriggers); //设置不可编辑

setFocusPolicy(Qt::NoFocus); //去除选中虚线框

horizontalHeader()->setSectionsClickable(false);//设置表头不可点击

horizontalHeader()->setDefaultAlignment(Qt::AlignHCenter | Qt::AlignVCenter);//设置标题对齐方式

horizontalHeader()->setSectionResizeMode(QHeaderView::Fixed);//设置标题列宽不可变  QHeaderView::Stretch  //平均分配整个表格宽度  QHeaderView::ResizeToContents //根据内容调整宽度

verticalHeader()->setDefaultSectionSize(35); //设置行高

setSelectionBehavior(QAbstractItemView::SelectRows);//设置选中整行

setSelectionMode(QAbstractItemView::SingleSelection);//设置选中单行

horizontalHeader()->setStretchLastSection(true);//最后一列填满

setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//设置不显示水平滚动条

horizontalHeader()->resizeSection(0,120); //设置表头第1列的宽度

horizontalHeader()->setMinimumSectionSize(1);//设置列的最小值，否则最小宽度为25

horizontalHeader()->setHeighlightSections(false);//设置点击表头时是否光亮

五、QComboBox下拉框

设置下拉框整体

QComboBox{

font: 12pt "Arial";

color: rgb(211,238,255);

background-color: rgba(255, 255, 255, 0);

border:0;

}

设置下拉按钮

QComboBox::drop-down {

image: url(:/photo/loginArrow.png);

}

整个下拉窗体

QComboBox QAbstractItemView {

outline: 0px solid; /*分割线*/

border: 1px solid;

color: #d4f3ff;

background-color: #124879;

selection-background-color:#0a386e; /* 整个下拉窗体被选中项的背景色*/

}

设置滚动条样式见上述滚动条。

（可将QScrollBar:vertical{}也成QComboBox QAbstractScrollArea QScrollBar:vertical{}）

下拉列表的位置：

在Windows下默认位置如下图：

       

在ubuntu下默认位置如下图：

      

 可以通过设置样式表来更改下拉窗体的位置：

QComboBox {combobox-popup: 0;}

 其中 0代表第一种样式，是常用的样式；1代表第二种样式。

六、QTabWidget

标题区域

QTabWidget#tabWidget{

background-color:rgb(255,0,0);

}

必须设置背景色属性才可显示标题栏颜色

setAttribute(Qt::WA_StyledBackground);

tab

QTabBar::tab{

background-color:rgb(220,200,180);

color:rgb(0,0,0);

font:10pt "新宋体"

}

tab选中时

QTabBar::tab::selected{

background-color:rgb(0,100,200);

color:rgb(255,0,0);

font:10pt "新宋体"

}

七、QMenu

窗体

QMenu{

color:rgb(255,255,255);

background-color:#073057;

border-color:#83b6cd;

}

选中项

QMenu::item:selected{

background-color:#0e94eb;

}

八、QSlider

滑块整体背景区域

QSlider{

background-color: #E5E5E5;

border-radius: 18px;

padding: 4px;

image: url(:/Data/clean_record_setting/level.png);

}

 滑块滑动区域

QSlider::groove:horizontal {

height: 20px;

border-radius: 18px;

padding: 4px;

}

滑块滑过区域

QSlider::sub-page:horizontal {

background-color:rgba(133, 106, 68, 0.25);

height: 28px;

border-top-left-radius:12px;

border-bottom-left-radius:12px;

}

 滑块未滑过区域

 QSlider::add-page:horizontal {

background-color:rgba(255, 106, 68, 0.25);

}

 滑块

QSlider::handle:horizontal {

width: 4px;

height:40px;

background-color: #585858;

margin-top:-10px;

margin-bottom:-10px;

} 

九、QSpinBox/QDoubleSpinBox

 整个窗体背景

QDoubleSpinBox{  
	font: 500  30px "DIN";
	color: rgb(32,41,69);

	selection-background-color:transparent;
	selection-color:black;
	background-color:transparent;
}

减按钮

QDoubleSpinBox::down-button {
	subcontrol-origin:border;
	subcontrol-position:left top;
	image: url(:/image/subtract.png);
	width:60px;
	height:60px;   
}

加按钮

QDoubleSpinBox::up-button {
	subcontrol-origin:border;
	subcontrol-position:right top;
	image: url(:/image/add.png);
	width:60px;
	height:60px;    
}

 减按钮按下

QDoubleSpinBox::down-button:pressed{
	image: url(:/image/subtract_pressed.png);
	width:60px;
	height:60px;   
}

 加按钮按下  

QDoubleSpinBox::up-button:pressed{
	image: url(:/image/add_pressed.png);
	width:60px;
	height:60px; 
}