qt 滚动条美化

2024-10-25 07:19:57

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);}"
);

码农公寓

一、竖直滚动条

注意：

二、水平滚动条

注意：

相关文章