Qt拿来画控件还是很方便的，其中除了重写paint() 函数外，最常用的就是控件的样式表qss了。本文简单介绍下QSS，同时记录下各种QSS日常骚操作。
QSS介绍
QSS简介
QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。
QSS的语法规则
基本和CSS相同，只是有的属性QSS中没有，相当于CSS的子集。
QSS的选择器类型
| 选择器 | 栗子 | 说明 |
|---|---|---|
| 通配选择器 | * | 匹配所有的控件 |
| 类型选择器 | QPushButton | 匹配所有QPushButton和其子类的实例 |
| 属性选择器 | QPushButton[flat="false"] | 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性 |
| 类选择器 | .QPushButton | 匹配所有QPushButton的实例，但是并不匹配其子类 |
| ID选择器 | #myButton | 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值 |
| 包含选择器 | QDialog QPushButton | 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的 |
| 子选择器 | QDialog > QPushButton | 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog |
另外上面所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，同CSS一样。
QSS子控件
QSS为很多复杂的复合控件提供了子控件的定义，以方便对这些复合控件的各个部分进行样式设置，具体使用下面说明。
QSS伪状态
QSS的伪状态选择器实际上与CSS中的类似，是以冒号开头的一个选择表达式，他限制了当控件在某一种状态下的时候才能应用QSS规则，伪状态只能描述一个控件的状态，或者是一个复合控件中的子控件的状态。下面列出常用的伪状态：
| 状态 | 说明 |
|---|---|
| :active | 当小部件驻留在活动窗口中时，将设置此状态 |
| :checked | 该控件被选中时候的状态 |
| :hover | 鼠标在控件上方 |
| :pressed | 该控件被按下时的状态 |
| :disabled | 该控件禁用时的状态 |
| :first | 该控件是第一个（列表中） |
| :focus | 该控件有输入焦点时 |
| :has-children | 该控件有孩子。例如，QTreeView中包含子项目的控件 |
| :open | 该控件处于打开状态。例如，QTreeView中的扩展项，或打开菜单的QComboBox或QPushButton |
| :unchecked | 该控件未被选中 |
QSS代码片段
单个控件
QPushButton{ /*按钮上图标下文字*/
text-align:bottom ;
image-position:top;
color: #666666;
border:none;
image: url(:xxxxx.png);
}
QPushButton{ /*按钮自适应拉伸背景*/
border-width: 2px 15px 2px 15px;
border-image: url(:/resource/icon/button_nomal.png) 2 15 2 15 repeat stretch;
color:#3288E8;
}
QPushButton{ /*按钮选中带下划线*/
border:none;
border-width:5;
border-bottom-style:solid;
border-color:transparent;
color:#666666;
}
QPushButton:checked{
color:#3288E8;
border-color: #3288E8;
}
QPushButton{ /*按钮左文字右图标*/
background-image:url(:/resource/btn.png);
background-repeat:norepeat;
background-position:right;
text-align:right;
border:none;
color:white;
padding-right:35px;
}
QPushButton { //按钮渐变背景
font-size:12px;
border-radius:2px;
color:rgba(51,51,51,1);
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgba(242,242,242,1), stop:1 rgba(255,255,255,1));
border:1px solid rgba(221,221,221,1);
}
QWidget#line{ //在Widget某一边画分割线
background-color:white;
border-left:none;
border-top:none;
border-right:none;
border-bottom:1px solid rgba(216,216,216,1);
}
含子控件
/**************************************CheckBox*********************************************/
QCheckBox::indicator:unchecked{
image: url(:/resource/chebox_off.png)
}
QCheckBox::indicator:checked{
image: url(:/resourcechebox_on.png)
}
/**************************************CheckBox*********************************************/
/**************************************QTabBar*********************************************/
QTabBar::tab {
color: #666666;
height:40px;
width:100px;
}
QTabBar::tab:selected {
color: #333333;
font-weight:bold
}
QTabBar::tab:hover {
color: #666666;
}
/**************************************QTabBar*********************************************/
/**************************************滑动条*********************************************/
QSlider {
background: rgb(170, 170, 170);
padding: 2px;
height: 40px;
}
QSlider::groove:horizontal {
subcontrol-origin: content;
background: rgb(76, 76, 76);
/* the groove expands to the size of the slider by default.
by giving it a height, it has a fixed size */
height: 20px;
}
QSlider::handle:horizontal {
background-color: rgb(50, 50, 50);
width: 40px;
border-radius: 20px;
/* handle is placed by default on the contents rect of the groove.
Expand outside the groove */
margin: -10px 0;
}
QSlider::sub-page:horizontal {
background: #999;
margin: 5px;
border-radius: 5px;
}
QSlider::add-page:horizontal {
background: #666;
margin: 5px;
border-radius: 5px;
}
/**************************************滑动条*********************************************/
/**************************************下拉框*********************************************/
QComboBox{
border:0px;
background-color:transparent;
color:#333333;
}
QComboBox::down-arrow{
image:none;
}
QComboBox::drop-down{
width:0px;
border:0px;
}
QComboBox QAbstractItemView {
color:#333333;
border: 1px solid #DDDDDD;
background-color:white;
selection-color:white;
selection-background-color: rgb(0, 102, 96);
}
/**************************************下拉框*********************************************/
/**************************************滚动条*********************************************/
QScrollBar:horizontal {
height: 16px;
border-width: 0px 10px 0px 10px;
border-image: url(:/img/horizontal-track.png) 0 10 0 10 repeat stretch;
margin-left: 6px;
margin-right: 16px;
padding-right: 4px;
}
QScrollBar::handle:horizontal {
min-width: 40px;
border-width: 0 17px 0 17px;
border-image: url(:/img/horizontal-handle.png) 0 17 0 17 repeat repeat;
}
QScrollBar::sub-line:horizontal {
width: 20px;
height: 17px;
subcontrol-position: left;
subcontrol-origin: margin;
background-image: url(:/img/horizontal-sub-line.png)
}
QScrollBar::add-line:horizontal {
width: 20px;
height: 17px;
subcontrol-position: right;
subcontrol-origin: border;
background-image: url(:/img/horizontal-add-line.png)
}
QScrollBar:vertical {
width: 16px;
border-width: 10px 0px 10px 0px;
border-image: url(:/img/vertical-track.png) 10 0 10 0 repeat repeat;
margin-top: 6px;
margin-bottom: 16px;
padding-bottom: 6px;
}
QScrollBar::handle:vertical {
min-height: 40px;
border-width: 17px 0px 17px 0px;
border-image: url(:/img/vertical-handle.png) 17 0 17 0 repeat repeat;
}
QScrollBar::sub-line:vertical {
width: 17px;
height: 22px;
subcontrol-position: top left;
subcontrol-origin: margin;
background-image: url(:/img/vertical-sub-line.png)
}
QScrollBar::add-line:vertical {
width: 17px;
height: 22px;
subcontrol-position: bottom;
subcontrol-origin: border;
background-image: url(:/img/vertical-add-line.png)
}
/**************************************滚动条*********************************************/
/**************************************滑块*********************************************/
QSlider {
height: 20px;
}
QSlider::groove:horizontal {
subcontrol-origin: content;
background: transparent;
height: 20px;
}
QSlider::handle:horizontal {
background-color: rgb(50, 50, 50);
width: 20px;
border-radius: 10px;
}
QSlider::sub-page:horizontal {
background: #0078FF;
margin: 7px;
border-radius: 3px;
}
QSlider::add-page:horizontal {
background: #999999;
margin: 7px;
border-radius: 3px;
}
/**************************************滑块*********************************************/
持续更新ing...
参考资料
- QSS总结以及最近做的Qt项目
- Qss
- Qt之QSS（样式表语法）