QSS常用样式

最近在使用QT样式表为公司的产品设计UI，期间都是在网上搜集和查询QT手册Qt Style Sheets Reference章节，在此记录一下一些常用的控件属性

背景

image : url(:/loginView/Resource/png/login_logo.png); # 用于设置背景图片，路径为资源文件路径
background-color : rgba(255, 255, 255, 0.1);
background-color : transparent

渐近方式

background-color : qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(57, 156, 243, 1),stop:1 rgba(34, 104, 207, 1))");

边框

border : none;
margin : 0px #通过边框可以实现一些显示分隔效果
padding-left : 8px; 
outline: 0px solid gray; # 获得焦点的控件的轮廓线

圆角

border-top-left-radius : 8px
border-bottom-right-radius : 8px
border-radius : 8px;

字体相关

font-family : Microsoft YaHei;
color : #ffffff;  # color: rgba(255, 255, 255, 0.5);
font-size : 16px; 
font-weight:700;
line-height : 27px;
text-align :left;
text-decoration : underline;

指定方式

QPushButton#m_caseDelBtn,#m_exportBtn{...} #指定控件
QPushButton:enabled{...} #指定状态，QT还支持自定义状态

QComboBox

下拉列表要生效需要调用comboBox->setView(new QListView());

QComboBox {background-color : rgba(255, 255, 255, 0.1); border-radius : 8px; \
		   font-family : Microsoft YaHei; font-size : 15px;  line-height : 38px; \
		   padding-left : 8px; color: rgba(255, 255, 255, 0.5);margin : 0px}
QComboBox::drop-down {border:none;width:65px}
QComboBox::down-arrow {image:url(:/loginView/Resource/png/login_icon_drop_down.png);} 
QComboBox QAbstractItemView {outline: 0px solid red; }
QComboBox QAbstractItemView::item{color:#ffffff;height: 40px;background-color:#2f3a4b;padding-left : 8px;}
QComboBox QAbstractItemView::item:hover {color:#ffffff;background-color: #2979ff;} #悬浮的下拉项
QComboBox QAbstractItemView::item:selected{} #已选择的下拉项

QProcessBar

QProgressBar {background-color:rgba(255, 255, 255, 0.1);border-radius : 2px;\
	    	  color:rgba(255, 255, 255, 0.9);font-size:12px;line-height:15px;font-family:Microsoft YaHei;}\
QProgressBar::chunk {background-color : qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(34, 167, 236, 1),stop:1 rgba(2, 104, 253, 1))} #进度条填充颜色

QTableView

QHeaderView::section:horizontal{...}	# 水平表头
QTableView::item{...}	# 数据
QTableView::item:selected{..} #选中项
setColumnWidth(0,100) # 设置0列列宽，需要在setModel之后调用生效

QTabWidget

QTabWidget::pane{	border-left:4px solid black; border-right:4px solid black;} #边框子控件
QTabWidget::tab-bar{	left:4px solid black; right:4px solid black;} #tab-bar子控件，左右指定为0px时可以让tab-bar填充整个窗口宽度，防止出现上下页按钮
QTabBar::tab:selected{} #选中的tab项
QTabBar::tab:!selected{margin-top: 8px;} 
QTabBar::tab:first{} #第一个tab
QTabBar::tab{}
QTabBar::tab:last{}#最后一个tab