【QSS样式表 - ⑬】：QScrollBar控件样式

QScrollBar控件样式

1. 常用属性
   
2. 伪状态
   
3. 子控件
   

QSS示例

1. 新建一个 QMainWindow 窗口，在其中放置两个 QScrollBar 控件。
   
2. 如下所示。

QScrollBar:vertical{
	border: 2px solid blue;
	background-color: yellow;
	width: 16px;
	margin: 20px 0px 20px 0px;
}

QScrollBar::handle:vertical{
	min-width: 40px;
}

QScrollBar:horizontal{
	border: 2px solid red;
	background-color: black;
	height: 16px;
	margin: 0px 20px;
}

QScrollBar::handle:horizontal{
	min-height: 40px;
}

/* 鼠标停留在滑块上 */
QScrollBar::handle:hover{
	background-color: red;
}

/* 鼠标按下滑块 */
QScrollBar::handle:pressed{
	background-color: green;
}

/* 上移按钮 */
QScrollBar::sub-line:vertical{
	border: 1px solid gray;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: cyan;
	/* 子控件参考位置 */
	subcontrol-origin: margin;
	subcontrol-position: top;
	height: 20px;  /* 正好是前面margin预留的高度 */
}

/* 下移按钮 */
QScrollBar::add-line:vertical{
	border: 1px solid gray;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: black;
	/*子控件参考位置*/
	subcontrol-origin: margin;
	subcontrol-position: bottom;
	height: 20px;	/* 正好是前面margin预留的高度 */
}

/* 向上箭头 */
QScrollBar::up-arrow:vertical{
	image: url(:/images/images/up-arrow.png);
	width: 15px;
	height: 15px;
}

/* 向下箭头 */
QScrollBar::down-arrow:vertical{
	width: 15px;
	height: 15px;
	image: url(:/images/images/down-arrow.png);
}

/* 滑块已划过的区域 */
QScrollBar::sub-page:vertical{
	background-color: gray;
}

/* 滑块未划过的区域 */
QScrollBar::add-page:vertical{
	background-color: rgb(85, 170, 255);
}