原创
Qt中QScrollBar样式用法(QSS)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
</div>
<!--一个博主专栏付费入口-->
<!--一个博主专栏付费入口结束-->
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-833878f763.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-833878f763.css">
<div class="htmledit_views" id="content_views">
<p>1.1 QScrollBar样式用法如下:</p>
-
//整个垂直滚动条区域样式
-
"QScrollBar:vertical{background-color:transparent;width:20px;height:255px;padding-top:20px;padding-bottom:20px;}"
-
-
//滚动条上面和下面区域样式
-
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"
-
-
//滑块区域样式
-
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(255,0,0,1);}"
-
-
//鼠标滑过滑块样式
-
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:red;border:1px solid rgb(255,255,255);}"
-
-
//向上箭头样式
-
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(255,0,0,0.5) url(:/1.png);}"
-
-
//向上箭头滑过、摁下样式
-
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"
-
-
//向下箭头样式
-
"QScrollBar::add-line:vertical{height:20px;width:20px;background:red url(:/1.png);}"
-
-
//向下箭头滑过、摁下样式
-
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"
-
/*设置垂直滚动条*/
-
"QScrollBar:vertical{background-color:transparent;width:20px;height:200px;padding-top:20px;padding-bottom:20px;}"
//整个垂直滚动条区域样式
-
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"
//滚动条上面和下面区域样式
-
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"
//滑块区域样式
-
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"
//鼠标滑过滑块样式
-
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_up.png);}"
//向上箭头样式
-
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_up.png);border:1px solid rgb(255,255,255);}"
//向上箭头样式
-
"QScrollBar::add-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_down.png);}"
//向下箭头样式
-
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_down.png);border:1px solid rgb(255,255,255);}"
//向下箭头样式
-
-
/*设置水平滚动条*/
-
"QScrollBar:horizontal{background-color:transparent;width:140px;height:12px;padding-left:12px;padding-right:12px;}"
//整个水平滚动条背景样式
-
"QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background-color:transparent;}"
//滚动条左面和右面区域样式
-
"QScrollBar::handle:horizontal{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"
//滑块区域样式
-
"QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"
//鼠标滑过滑块样式
-
"QScrollBar::sub-line:horizontal{subcontrol-position:left;height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/1.png);}"
//向左箭头样式
-
"QScrollBar::sub-line:horizontal:hover,QScrollBar::sub-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"
//向左箭头样式
-
"QScrollBar::add-line:horizontal{height:12px;width:20px;background:rgba(75,120,154,0.8) url(:/1.png);}"
//向右箭头样式
-
"QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"
//向右箭头样式
参考内容:
https://blog.csdn.net/wzs250969969/article/details/78496856
https://blog.csdn.net/iamplane/article/details/78216364
https://my.oschina.net/u/221120/blog/634053?p=1(参考:主要)