QScrollBar样式表（带注释）

已于 2022-07-27 16:22:49 修改
阅读量3.6k 收藏 35
点赞数 4
分类专栏： QT界面 文章标签： QT 界面 windows C++
于 2022-07-22 15:08:50 首次发布
原文链接：https://blog.csdn.net/weixin_43956958/article/details/121666680
版权

QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分


/*垂直滑块整体*/
QScrollBar:vertical{
    background:#FFFFFF;  /*背景色*/
    padding-top:20px;  /*上预留位置（放置向上箭头）*/
    padding-bottom:20px;  /*下预留位置（放置向下箭头）*/
    padding-left:3px;  /*左预留位置*/
    padding-right:3px;  /*右预留位置*/
    border-left:1px solid #d7d7d7;  /*左分割线*/
    margin:0px 0px 0px 0px;
}
/*滑块样式*/
QScrollBar::handle:vertical{
    background:#dbdbdb;  /*滑块颜色*/
    border-radius:6px;  /*边角圆润*/
    min-height:80px;  /*滑块最小高度*/
    margin-left:5px; /*滑块与滑轨左边的距离*/
    margin-right:5px; /*滑块与滑轨右边的距离*/
}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover{
    background:#d0d0d0;  /*滑块颜色*/
}
/*鼠标触及滚动条样式*/
QScrollBar::vertical:hover{
    background:#d0d0d0;  /*滑块颜色*/
}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:pressed{
    background:#d0d0d0;  /*滑块颜色*/
}
/*鼠标触及滚动条样式*/
QScrollBar::vertical:pressed{
    background:#d0d0d0;  /*滑块颜色*/
}
/*向下箭头样式*/
QScrollBar::add-line:vertical{
    /*background:url(/images/down.png) center no-repeat;*/
    subcontrol-position:bottom;
}
/*向上箭头样式 */
QScrollBar::sub-line:vertical{
    /*background:url(:/images/up.png) center no-repeat;}*/
    subcontrol-position:top;
}
/*当鼠标放到下箭头上的时候*/
QScrollBar::add-line:vertical:hover{
    height:9px;
    width:8px;
    /*border-image:url(:/images/a/4.png);*/
    subcontrol-position:bottom;
}
/*当鼠标放到下箭头上的时候*/
QScrollBar::sub-line:vertical:hover{
    height:9px;
    width:8px;
    /*border-image:url(:/images/a/2.png);*/
    subcontrol-position:top;
}
/*当滚动条滚动的时候，上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
    background:rgba(0,0,0,10%);
    border-radius:4px;
}
QScrollBar::up-arrow:vertical{
subcontrol-origin: margin;
height:16px;
border:0 0 0 0;
border-image: url(:/DirectionArrow/image/DisplayImage/up-row.png);
}
QScrollBar::down-arrow:vertical{
subcontrol-origin: margin;
height:16px;
border-image:url(:/DirectionArrow/image/DisplayImage/down-row.png);
}

调用QSS文件

def load_style_sheet(filename, widget):
    with open(filename, 'r', encoding='UTF-8') as f:
        style_sheet = f.read()
    widget.setStyleSheet(style_sheet)

去掉上下两个箭头

/*向下箭头样式*/
QScrollBar::add-line:vertical{
    background:none;
}
/*向上箭头样式 */
QScrollBar::sub-line:vertical{
    background:none;
}
/*当滚动条滚动的时候，上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
    background:none;
}
————————————————
版权声明：本文为CSDN博主「初学小白Lu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43956958/article/details/121666680

以下为原创部分：

    //竖滚动条可滚动部分的样式
QScrollBar:vertical{
    border: 1px solid #0068D5;
    background-color: rgba(0, 104, 213, 76);
    width: 14px;    //滚动条整体宽度
    margin: 13px 0px 13px 0px;    //13px是上下留给箭头按钮的位置
}
//滑块样式
QScrollBar::handle:vertical{
    background: #0068D5;
    min-height: 20px;
    border-radius:1px;
    margin:1px 1px 1px 1px;//上下左右留出1px，与边界不重合
}
//鼠标落在滑块上的滑块背景色
QScrollBar::handle:vertical:hover{
    background: #2971e2;
}
//滑块按下样式
QScrollBar::handle:vertical:pressed{
    background-color: rgba(125, 250, 250, 128);
}
//下方箭头按钮的位置大小边框样式
QScrollBar::add-line:vertical{
    border: 1px solid #0068D5;
    height: 12px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
//上方箭头按钮的位置大小边框样式
QScrollBar::sub-line:vertical{
    border: 1px solid #0068D5;
    height: 12px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
//向上箭头样式
QScrollBar:up-arrow:vertical{
    width: 12px;
    height: 12px;    
    border-image: url(:/img/blue1/scroll_arrow_up.png);
}
//向下箭头样式
QScrollBar::down-arrow:vertical{
    width: 12px;
    height: 12px;    
    border-image: url(:/img/blue1/scroll_arrow_down.png);
}
QScrollBar:up-arrow:vertical:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_upH.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar::down-arrow:vertical:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_downH.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar:up-arrow:vertical:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_upS.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar::down-arrow:vertical:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_downS.png);
    margin: 1px 1px 1px 1px;
}
//滑块上方、下方样式
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical{
    background: rgba(0, 104, 213, 76);
}
//滑块上方、下方鼠标滑过样式
QScrollBar::sub-page:vertical:hover{
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 68));
}
QScrollBar::add-page:vertical:hover{
    background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 68));
}
//横滚动条参照竖滚动条样式说明
QScrollBar:horizontal{
    border: 1px solid #0068D5;
    background-color: rgba(0, 104, 213, 76);
    height: 14px;    //注意横滚动条设置的是高度
    margin: 0px 13px 0px 13px;//左右留出13px箭头按钮位置
}
QScrollBar::handle:horizontal{
    background: #0068D5;
    min-width: 20px;
    border-radius:1px;
    margin:1px 1px 1px 1px;
}
QScrollBar::handle:horizontal:hover{
    background: #2971e2;
}
QScrollBar::handle:horizontal:pressed{
    background-color: rgba(125, 250, 250, 128);
}
QScrollBar::add-line:horizontal{
    border: 1px solid #0068D5;
    width: 12px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal{
    border: 1px solid #0068D5;
    width: 12px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal{
    width: 12px;
    height: 12px;    
    border-image: url(:/img/blue1/scroll_arrow_left.png);
}
QScrollBar::right-arrow:horizontal{
    width: 12px;
    height: 12px;    
    border-image: url(:/img/blue1/scroll_arrow_right.png);
}
QScrollBar:left-arrow:horizontal:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_leftH.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar::right-arrow:horizontal:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_rightH.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar:left-arrow:horizontal:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_leftS.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar::right-arrow:horizontal:hover{
    width: 10px;
    height: 10px;    
    border-image: url(:/img/blue1/scroll_arrow_rightS.png);
    margin: 1px 1px 1px 1px;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal{
    background: rgba(0, 104, 213, 76);
}
QScrollBar::sub-page:horizontal:hover{
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 0));
}
QScrollBar::add-page:horizontal:hover{
    background: qlineargradient(spread:pad, x1:1, y1:0, x2:0, y2:0, stop:0 rgba(0, 104, 213, 128), stop:1 rgba(0, 104, 213, 0));
}    

   

雒珣
关注
专栏目录
QScrollBar样式表总结
草上爬的博客
11-16 6547
具体的style sheet代码，这里面的CSS代码还可以写得更优雅一些，反正是起作用了，没太大兴趣再去继续弄。如图所示，QTableView使用的QHeaderView与scrollbar的style。当然，不用背景图也是可以的，下面是使用QSS实现扁平滚动条，只有几个简单的颜色。为了更符合扁平风格，去掉了滚动条两端的箭头。☆鼠标放到handle上的背景色。☆handle的背景色。
Qt QScrollBar滚动条样式设置
随笔
11-14 9856
Qt QScrollBar滚动条样式设置
【Qt笔记】QScrollArea控件详解
最新发布
qq_52924376的博客
09-13 2491
QScrollArea 是 Qt 框架中用于提供一个滚动条区域，允许用户滚动查看比当前可视区域更大的内容的控件。
QScrollBar完整的样式表
Black_Silencer的博客
10-26 4170
一、水平滚动条 QScrollBar:horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; } QScrollBar::handle:horizontal { background: white; min-width: 20px; } QScrollBar::add-line:hor
QScrollBar样式
MoMo_KUA_1的专栏
08-01 3544
QScrollBar样式       滚动条在Qt里叫做QScrollBar，使用样式设置控件的外观很方便，这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。 const QString VSCROLLBAR_STYLE =             "QScrollBar:vertical {margin: 13px 0px 13px 0px;background-col
QScrollBar样式表
C++初学者
11-27 1264
滑动条分横向（horizontal）和纵向（vertical） QScrollBar:horizontal{ Border:2px solid red; Margin:0px 20px 0px 20px; } //滑块设置 QScrollBar::handle:horizontal{ Min-width:20px;//长度 } //顶部控制块 QScrollBar::ad...
Qt中QScrollBar样式用法（QSS）
净无邪博客
09-23 8688
1.1 QScrollBar样式用法如下： //整个垂直滚动条区域样式 "QScrollBar:vertical{background-color:transparent;width:20px;height:255px;padding-top:20px;padding-bottom:20px;}" //滚动条上面和下面区域样式 "QScrollBar::add-page:vertica...
python QT designer tableview 滑条QScrollBar样式设置后失效解决方案
wg2627的博客
11-16 1354
1、原因分析 QT designer tableview组件样式中不能直接设置滑条QScrollBar样式 2、解决方案 QT designer 创建 Scroll Area组件，并将tableview组件放入到Scroll Area组件中即可 在tableview组件中设置滑条QScrollBar样式 如下图： Scroll Area组件属性按箭头 设置成ScrollBarAlwaysOff (自带滑条不显示) Scroll Area组件样式修改为无边框如下： border: 0px groove g
QScrollArea qss样式表，美化滚动条
波风水门
10-25 2928
文章目录效果图如下：前言QSS样式表代码 效果图如下： 前言 在网上翻遍如何优化QScrollArea 样式表，发现没有，一顿气啊，这白嫖越来越难了，只能自己去写了，下面我给出具体的样式表，直接粘贴即可使用，参考上面的效果图展示 QSS样式表代码 如果要禁用水平滑动条请写如下代码： ui->scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); 下面是我的QSS美化样式，我只做了垂直滑动条的美化，水平的目前没有美化，
QSS教程：自定义QScrollBar样式
FuJavascript的博客
09-21 226
在上面的代码中，我们使用QSS字符串来定义QScrollBar的样式。通过使用Qt Style Sheets（QSS），我们可以自定义QScrollBar的外观和样式。通过自定义QSS，您可以根据需要修改QScrollBar的外观和样式。在主窗口的构造函数中，我们创建了一个QScrollBar部件并将其设置为主窗口的中央部件。在Qt应用程序的主窗口中，添加一个QScrollBar部件。首先，我们需要创建一个新的Qt应用程序。现在，我们可以编译并运行应用程序，以查看自定义的QScrollBar样式是否生效。
QScrollBar样式 - qss样式表学习
wang13342322203的博客
09-13 9819
QScrollBar样式 滚动条在Qt里叫做QScrollBar，使用样式设置控件的外观很方便，这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。 const QString VSCROLLBAR_STYLE = “QScrollBar:verTIcal {margin： 13px 0px 13px 0px;background-color： rgb（255， 255， 255...
QSrcollBar样式表设置
weixin_43742643的博客
09-03 850
好看的QScrollBar样式表、介绍QScrollBar构造。含效果图。
QScrollerBar样式
weixin_43956958的博客
12-20 1337
QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分 /*垂直滑块整体*/ QScrollBar:vertical{ background:#FFFFFF; /*背景色*/ padding-top:20px; /*上预留位置（放置向上箭头）*/ padding-bottom:20px; /*下预留位置（放置向下箭头）*/ padding-left:3px; /*左
QSS实践汇总（1）——QScrollBar样式、滚动条样式（风格）
m0_51668269的博客
11-06 7194
1、特别说明 （1）本文参考了网上资料，特别是如下QScrollBar区域描述非常详细 QScrollBar样式 - qss样式表学习_wang13342322203的博客-CSDN博客_qscrollbar样式 （2）以下部分为QScrollBar样式原创，分为水平方向及垂直方向，同大家共同学习分享 2、注意事项 （1）上下火左右箭头风格不生效时，查看以下两个属性是否设置 subcontrol-position:left; subcontrol-origin:margin; （2）QScr
滚动条样式qscrollbar
weixin_33800463的博客
04-09 504
2019独角兽企业重金招聘Python工程师标准>>> ...
QScrollArea样式
hulinhulin的专栏
10-05 2155
QScrollBar滚动条样式设置
QTableWidget滑块的样式表怎么设置
11-29
以下是设置QTableWidget滑块样式表的方法： ```python # 设置QTableWidget滑块样式表 self.tableWidget.verticalScrollBar().setStyleSheet("QScrollBar:vertical{background:#FFFFFF;border:none;width:10px;margin:0px 0px 0px 0px;}" "QScrollBar::handle:vertical{background:#E6E6E6;border-radius:5px;width:10px;margin:0px 0px 0px 0px;}" "QScrollBar::handle:vertical:hover{background:#CFCFCF;border-radius:5px;width:10px;margin:0px 0px 0px 0px;}" "QScrollBar::add-line:vertical{background:url(:/images/down.png) center no-repeat;width:10px;height:10px;subcontrol-position:bottom;}" "QScrollBar::sub-line:vertical{background:url(:/images/up.png) center no-repeat;width:10px;height:10px;subcontrol-position:top;}" "QScrollBar::add-line:vertical:hover{background:url(:/images/down_hover.png) center no-repeat;width:10px;height:10px;subcontrol-position:bottom;}" "QScrollBar::sub-line:vertical:hover{background:url(:/images/up_hover.png) center no-repeat;width:10px;height:10px;subcontrol-position:top;}" "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:none;}") ``` 其中，`self.tableWidget`是QTableWidget对象的名称，`verticalScrollBar()`是获取QTableWidget的垂直滑块的方法，`setStyleSheet()`是设置样式表的方法。在样式表中，`QScrollBar:vertical`表示垂直滑块，`QScrollBar::handle:vertical`表示滑块的手柄，`QScrollBar::add-line:vertical`和`QScrollBar::sub-line:vertical`表示滑块的上下箭头，`QScrollBar::add-page:vertical`和`QScrollBar::sub-page:vertical`表示滑块的背景。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值