Qt易忘样式表总结

前言

在使用Qt框架开发软件时，为了美观和更好的用户体验，需要为各种控件设置样式。一些通用且简单的样式如背景色、边框、字体字号等，基本上写过Qt样式的猿们都能记住，但是像日历、树形控件、Tab页控件等复合控件的样式则很难凭记忆写出来。所以本篇除了总结Qt设置样式的几种方式之外，还总结了几个复合控件的样式设置。

1、Qt设置样式的几种方式

• 在代码中设置控件的样式（最不推荐）
• 在ui文件中设置样式
• 将所有样式写到一个或几个qss文件中，根据需要通过setStyleSheet函数加载（推荐）

2、几种复合控件的样式设置

QTableWidget

当用到QTableWidget时，我们可以在UI文件中拖入一个，其基本的显示属性可以在UI中设置，也可以写代码设置。在下图中可以看到一个QTableWidget，添加了表头和3条数据，右侧是基本属性，黑色粗体部分是已经设置过的，非粗体是默认设置。

在qss文件中添加样式如下

/*设置表头样式*/
QHeaderView::section 
{
     background-color: rgb(50,200,255);
     color: white;
     padding-left: 4px;
     border: 1px solid #6ce0ff;
}

QHeaderView::section:checked
{
    background-color: rgb(0,200,255);
}

/*设置表格样式*/
QTableView {
   show-decoration-selected: 1;
}

QTableView::item {
    height: 30px;
    text-align:center;
}

QTableView::item:selected 
{
  	border: 1px solid #6a6ea9;
    color:white;
}

QTableView::item:selected:!active 
{
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                               stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QTableView::item:selected:active 
{
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                               stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QTableView::item:hover 
{
    background: rgb(50,100,200);
    color:white;
}

运行效果如下图所示。

QCalendarWidget

QCalendarWidget 控件一般与QDateEdit 或 QDateTimeEdit 控件配合使用，在UI中拖入一个QDateEdit控件，勾选 calendarPopup，这样在点击日期控件右侧按钮时就会弹出日历控件。UI图如下所示

设置QDateEdit 和 QCalendarWidget 的样式

/*设置QDateEdit样式*/
QDateEdit
{
	min-height:45px;
	border: 1px solid rgba(0,200,255);
}
QDateEdit::drop-down
{
	background-color : transparent;
	image: url(:/images/rili.png);
	min-width: 40px;
	min-height:40px;
}
  
/*设置QCalendarWidget样式*/
QCalendarWidget  QWidget#qt_calendar_navigationbar
{
	background-color: #2F5F8E;
}

QCalendarWidget QToolButton
{
	background-color:transparent; 
	min-width:23px; 
	max-width:23px; 
	min-height:23px; 
	max-height:23px;
}

QCalendarWidget QToolButton:hover
{
	background-color:rgb(134,193,251); 
	color:black;  
}

QCalendarWidget QToolButton#qt_calendar_monthbutton
{
	background-color:transparent; 
	min-width:50px; 
	max-width:50px; 
	min-height:23px; 
	max-height:23px;
}

QCalendarWidget QToolButton#qt_calendar_monthbutton:hover ,#qt_calendar_yearbutton:hover
{
	background-color:rgb(134,193,251, 100); 
	color:black;  
}

QCalendarWidget QToolButton#qt_calendar_prevmonth
{
	background-color:transparent; 
	min-width: 30px;
	min-height: 30px;
	qproperty-icon:url(:/images/zuojiantou.png)

}

QCalendarWidget QToolButton#qt_calendar_nextmonth
{
	background-color:transparent; 
	min-width: 30px;
	min-height: 30px;
	qproperty-icon: url(:/images/youjiantou.png);
}

QCalendarWidget QToolButton#qt_calendar_monthbutton,#qt_calendar_yearbutton
{
	min-width: 70px;
	color: rgb(134,193,251); 
	font: 14px;
}

运行效果如下图所示

QTreeWidget

设置QTreeWidget样式

QTreeView::branch:has-siblings:!adjoins-item
{
    border-image: url(:/images/stylesheet-vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item 
{
   	border-image: url(:/images/stylesheet-branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item 
{
	border-image: url(:/images/stylesheet-branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings
{
    border-image: none;
    image: url(:/images/stylesheet-branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings 
{
	border-image: none;
	image: url(:/images/stylesheet-branch-open.png);
}

运行效果：

样式表中的图片名称与对应的图片如下图所示，实际应用时按照下图所示的效果切图，替换样式表中对应的图片即可。

QSpinBox

设置QSpinBox样式

 QSpinBox 
{
	min-height: 40px;
	min-width: 80px;
	padding-right: 5px; 
	background-color: rgb(255, 159, 94);
	border-width: 3;
	font-size: 14px;
	color: blue;
}

QSpinBox::up-button
{
	subcontrol-origin: border;
	subcontrol-position: top right; /* position at the top right corner */
	width: 20px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
	border-image: url(:/images/shangjiantou.png) 1;
	border-width: 1px;
}

QSpinBox::down-button 
{
	subcontrol-origin: border;
	subcontrol-position: bottom right; /* position at bottom right corner */
	width: 20px;
	border-image: url(:/images/xiajiantou.png) 1;
	border-width: 1px;
	border-top-width: 0;
}

运行效果：

QComboBox

设置QComboBox样式如下

QComboBox 
{
	border: 1px solid rgb(131, 255, 0);
	border-radius: 3px;
	padding: 1px 18px 1px 3px;
	min-width: 200px;
	min-height: 40px;
	border-image: url(:/images/comboxbg.png);
}

QComboBox:editable 
{
	background: yellow;
}

QComboBox:!editable, QComboBox::drop-down:editable 
{
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on 
{
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
	                           stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
	                           stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on 
{ /* shift the text when the popup opens */
	padding-top: 3px;
	padding-left: 4px;
}

QComboBox::drop-down
{
	min-width: 40px;
	min-height:40px;
	subcontrol-origin: padding;
	subcontrol-position: top right;
	width: 15px;
	border-left-width: 1px;
	border-left-color: darkgray;
	border-left-style: solid; /* just a single line */
	border-top-right-radius: 3px; /* same radius as the QComboBox */
	border-bottom-right-radius: 3px;
}

QComboBox::down-arrow 
{
	min-height: 20px;
	min-width: 20px;
	image: url(:/images/xiajiantou.png);
}

QComboBox::down-arrow:on 
{ /* shift the arrow when popup is open */
	top: 1px;
	left: 1px;
}

QComboBox QAbstractItemView 
{
	border: 2px solid darkgray;
	selection-background-color: lightgray;
}

运行效果

以上就是本篇的所有内容了，有疑问的朋友欢迎评论区留言讨论！