qt 滚动条 美化

qt QScrollBar 滚动条分为竖直与水平滚动条,两者设置上类似,但也有一些不同,下面主要讲述美化及注意事项。

一、竖直滚动条

竖直滚动条分为7个部分: sub-line、 up-arrow、sub-page、 hanle、 add-line、 dow-arrow、 add-page 其中,sub-line区域包含up-arrow区域,add-line区域包含down-arrow区域。

handle是滚动条的滑块部分。

问题:

想要定制化设置滚动条: 滚动条宽度40,上下箭头高度设置50,滑块长度100。

实现的具体代码如下:

复制代码
ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}"
                                                    "QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }"
                                                    "QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}"
                                                   "QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }"
                                                   "QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}"
                                                   "QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}"
                                         );

注意:

1. 通过 实际效果图可以看到,sub-line区域比up-arrow区域大

**2.**要想上下箭头区域显示,必须设置border、padding或 border、margin

复制代码
QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}

或者

复制代码
QScrollBar::vertical { width: 40px; border:0px ;margin:50px 0px 50px 0px;}

其中,竖直滚动条设置宽度(width: 40px),水平滚动条设置高度;

3.sub-line add-line 必须设置subcontrol-origin:margin

4.添加 悬浮、按压时的样式----效果图中未体现

复制代码
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #606060;}"
 "QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#606060;}"
"QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#606060;}"
"QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(:/res/white.svg);}"
 "QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(://res/white.svg);}"

5.代码解读

复制代码
QScrollBar::vertical { width: 40px; border:0px ;margin:50px 0px 50px 0px;}/*竖直滚动条宽度;边距*/
QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }/*滑块背景色;滑块高度 */
QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}/* add-line高度设置;subcontrol必须设置,*/
QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }/*sub-line区域设置:高度;subcontrol必须设置 */
QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}/*箭头区域设置 */
QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}/* */

实际效果图:

6.整体代码

复制代码
  ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}"
                                                   "QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }"
                                                   "QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}"
                                                   "QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }"
                                                   "QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/arrow-drop.png);}"
                                                   "QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/ff.png);}"
                                                   "QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #606060;}"
                                                   "QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#606060;}"
                                                   "QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#606060;}"
                                                   "QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(:/res/white.svg);}"
                                                   "QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(:/res/white.svg);}"
                                                   );

二、水平滚动条

水平滚动条跟竖直滚动条差不多,也是分为7个部分: sub-line、 **left-arrow 、**sub-page 、hanle、 add-line、 right-arrow、 add-page 其中,sub-line区域包含left-arrow区域,add-line区域包含right-arrow区域。

实现主要代码如下:

复制代码
QScrollBar::horizontal { height:40px; border:0px ;margin:0px 40px  0px 40px;}//设置滚动条高度,边距
QScrollBar::handle:horizontal {background:red;border-radius:3px;min-width:100px;height:40px; }//设置handle宽度,高度
QScrollBar::add-line:horizontal {background:#F0F0F0;width: 40px;subcontrol-origin:margin;}
QScrollBar::sub-line:horizontal {subcontrol-position:left;background:#F0F0F0;width: 40px;subcontrol-origin:margin; }//注意:必须设置 位置 left
QScrollBar::left-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(:/a6.svg);}//左箭头
QScrollBar::right-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(:/b6.svg);}

注意:

  1. 水平滚动条设置高度,通过 height:40px进行设置,同时,margin:0px 40px 0px 40px;一定要设置,且与竖直滚动条设置的是不一样的。

水平滚动条设置高度,竖直滚动条设置宽度。

2.handle的长度、高度 通过min-width:100px;height:40px 进行设置

3.注意:sub-line:horizontal设置的与竖直滚动条不同,必须要指定位置 subcontrol-position:left ,其他的与竖直滚动条是一样的操作

4.其他的设置就与竖直滚动条一样了

竖直滚动条、水平滚动条整体代码如下:

复制代码
ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;margin:40px 0px 40px 0px;}"
"QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }"
"QScrollBar::add-line:vertical {background:#F0F0F0;height: 40px;subcontrol-origin:margin;}"
"QScrollBar::sub-line:vertical {background:#F0F0F0;height: 40px;subcontrol-origin:margin; }"
"QScrollBar::up-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(://up-arrow-1.svg);}"
"QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(://down-arrow-2.svg);}"
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #2c2c2c;}"
"QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#2c2c2c;}"
"QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#2c2c2c;}"
"QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(://up-arrow-3.svg);}"
"QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(://down-arrow-4.svg);}"
"QScrollBar::horizontal { height:40px; border:0px ;margin:0px 40px  0px 40px;}"
"QScrollBar::handle:horizontal {background:#CDCDCD;border-radius:3px;min-width:100px;height:40px; }"
"QScrollBar::add-line:horizontal {background:#F0F0F0;width: 40px;subcontrol-origin:margin;}"
"QScrollBar::sub-line:horizontal {subcontrol-position:left;background:#F0F0F0;width: 40px;subcontrol-origin:margin; }"
"QScrollBar::left-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(://left-arrow-5.svg);}"
"QScrollBar::right-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(://right-arrow-6.svg);}"
"QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed { margin: 0 1px 0 1px;  background: #2c2c2c;}"
"QScrollBar::add-line:horizontal:hover, QScrollBar::add-line:horizontal:pressed {background:#2c2c2c;}"
"QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:pressed {background:#2c2c2c;}"
"QScrollBar::left-arrow:horizontal:hover,QScrollBar::left-arrow:horizontal:pressed { border-image: url(://left-arrow-7.svg);}"
"QScrollBar::right-arrow:horizontal:hover,QScrollBar::right-arrow:horizontal:pressed { border-image: url(://right-arrow-8.svg);}"
);
相关推荐
DN金猿5 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子6 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6618 分钟前
Kotlin 的 suspend 关键字
前端
OpenC++24 分钟前
【C++QT】Buttons 按钮控件详解
c++·经验分享·qt·leetcode·microsoft
www_pp_30 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
我真的不会C1 小时前
QT窗口相关控件及其属性
开发语言·qt
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet