QT5常用样式表

• 先来个颜色代码表

• 自绘按钮（需准备三张图片对应正常状态，鼠标经过状态以及按钮按下时的状态，以下只用了两张）

ui->Button->setStyleSheet("
	QPushButton {border-image:url(:/icon/close);}		   //正常状态
	QPushButton:hover{border-image:url(:/icon/close_on);}      //鼠标经过时显示这张
	QPushButton:hover:pressed{border-image:url(:/icon/close);} //按下按钮时
");

效果

• 普通按钮(直接修饰一个按钮)

ui->Button->setStyleSheet("
QPushButton{border: 2px solid grey;    //边框宽2像素颜色为灰色
	background:rgb(183,203,188);   //按钮背景色
	border-radius: 8px;}           //按钮四个角的弧度大小
QPushButton:hover{border-color:rgb(183,203,188);}
QPushButton:pressed{border-color:gray} 
");

效果

• 滚动条（以列表框中的垂直滚动条为例，其他滚动条类似）

ui->listWidget->verticalScrollBar()->setStyleSheet("
QScrollBar{border: 0px solid transparent; //设置滚动条整体样式
	background:transparent;
 	width:11px;
	padding-top:10px; //滚动条上下箭头预留大小
	padding-bottom:10px;}
QScrollBar:handle{background:lightgray;  //设置滚动条中滑块的样式
	border:0px solid transparent; 
	border-radius:2px;}
QScrollBar:handle:hover{background:#669999;} //鼠标经过滑块改变滑块颜色
QScrollBar:sub-line{background:lightgray; }  
QScrollBar:add-line{background:lightgray;}  //这几个为滑块下面的槽的颜色
QScrollBar:add-page:vertical, QScrollBar:sub-page:vertical{background:transparent;}QScrollBar:add-line:vertical{height:10px;  //上箭头样式
	width:11px;
	border-image:url(:/icon/down);
	subcontrol-position:bottom;}
QScrollBar:sub-line:vertical{height:10px;  //下箭头样式
	width:11px;
	border-image:url(:/icon/up);
	subcontrol-position:top;} 
QScrollBar:add-line:vertical:hover{height:10px; //鼠标经过上箭头时
	width:11px;
	border-image:url(:/icon/down_on);
	subcontrol-position:bottom;}  
QScrollBar:sub-line:vertical:hover{height:10px; //鼠标经过下箭头时
	width:11px;
	border-image:url(:/icon/up_on);
	subcontrol-position:top;}  
QScrollBar:handle:vertical{min-height:5px} //设置垂直滑块的最小高度值,否则列表很大时滑块会消失
");

效果

• 进度条

ui->QSlider->setStyleSheet("
QSlider:groove:horizontal {border: 1px solid #00688B;
	height:5px;
	border-radius: 3px;}
QSlider:handle:horizontal{background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));
	width:10px;
	margin-top:-3px;
	margin-bottom:-3px;border-radius:5px;}
QSlider:handle:horizontal:hover {background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,stop:0.778409 rgba(255, 255, 255, 255));
	width:10px;
	margin-top: -3px;
	margin-bottom: -3px;
	border-radius:5px;}
QSlider:sub-page{border-radius:3px;
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #009ACD, stop:1 #008B8B);
	margin: 2px 0;}
");

效果

• 搜索框（一个lineEdit加一个图形按钮searchBtn）

1.ui->lineEdit->setTextMargins(0, 0, ui->searchBtn->width(), 0);
2.ui->lineEdit->setStyleSheet("QLineEdit{border: 1px solid gray;border-radius: 3px;background:rgb(200, 231, 232);} QLineEdit:hover{border-color:transparent; }");
3.给searchBtn设置一个icon图标

4.ui->searchBtn ->setStyleSheet("background:transparent;");

效果