Qt中QScrollBar样式用法（QSS）

最新推荐文章于 2024-03-25 15:25:52 发布
最新推荐文章于 2024-03-25 15:25:52 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： QT基础应用
原文链接：https://blog.csdn.net/naibozhuan3744/article/details/101221835
版权
原创

Qt中QScrollBar样式用法（QSS）

2019-09-23 19:46:05 阅读数 171 收藏 更多
分类专栏： Qt工程应用 Qt基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/naibozhuan3744/article/details/101221835 
            </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>


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //整个垂直滚动条区域样式
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar:vertical{background-color:transparent;width:20px;height:255px;padding-top:20px;padding-bottom:20px;}"   
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //滚动条上面和下面区域样式
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"         
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //滑块区域样式
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(255,0,0,1);}"    
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //鼠标滑过滑块样式
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:red;border:1px solid rgb(255,255,255);}"
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //向上箭头样式
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(255,0,0,0.5) url(:/1.png);}"
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //向上箭头滑过、摁下样式
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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);}"
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //向下箭头样式
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-line:vertical{height:20px;width:20px;background:red url(:/1.png);}"
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //向下箭头滑过、摁下样式            
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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);}"

 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     /*设置垂直滚动条*/
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar:vertical{background-color:transparent;width:20px;height:200px;padding-top:20px;padding-bottom:20px;}"   
     
     //整个垂直滚动条区域样式
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"         
     
     //滚动条上面和下面区域样式
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"    
     
     //滑块区域样式
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"
     
     //鼠标滑过滑块样式
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_up.png);}"
     
     //向上箭头样式
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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);}"
     
     //向上箭头样式
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_down.png);}"
     
     //向下箭头样式
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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);}"
     
     //向下箭头样式
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     /*设置水平滚动条*/
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar:horizontal{background-color:transparent;width:140px;height:12px;padding-left:12px;padding-right:12px;}"   
     
     //整个水平滚动条背景样式
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background-color:transparent;}"         
     
     //滚动条左面和右面区域样式
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:horizontal{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"    
     
     //滑块区域样式
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"
     
     //鼠标滑过滑块样式
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::sub-line:horizontal{subcontrol-position:left;height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/1.png);}"
     
     //向左箭头样式
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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);}"
     
     //向左箭头样式
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "QScrollBar::add-line:horizontal{height:12px;width:20px;background:rgba(75,120,154,0.8) url(:/1.png);}"
     
     //向右箭头样式
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     "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（参考：主要）

文章最后发布于: 2019-09-23 19:56:52
我知道你知道的我不知道
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt例程源代码QScrollBar.7z
07-19
Qt例程源代码QScrollBar.7z
Qt 滚动条样式表 QSS
lzy15192536135的博客
05-12 1544
qt滚动条样式表
QSS实践汇总（1）——QScrollBar样式、滚动条样式（风格）
m0_51668269的博客
11-06 5691
1、特别说明 （1）本文参考了网上资料，特别是如下QScrollBar区域描述非常详细 QScrollBar样式 - qss样式表学习_wang13342322203的博客-CSDN博客_qscrollbar样式 （2）以下部分为QScrollBar样式原创，分为水平方向及垂直方向，同大家共同学习分享 2、注意事项 （1）上下火左右箭头风格不生效时，查看以下两个属性是否设置 subcontrol-position:left; subcontrol-origin:margin; （2）QScr
QT QScrollBar 滚动条美化
xiaolin486546的博客
03-25 603
QT 基于qss自定义QScrollBar滚动条样式
Qt常用样式表-滚动条QScrollBar
DarkSying的博客
01-09 975
滚动条QScrollBar样式，水平方向、垂直方向
QT QSS设置QScrollBar
歌者的博客
10-12 456
QScrollBar:vertical { width:10px; background:transparent; margin:2px,2px,0px,0px; border-radius:5px; } QScrollBar::handle:vertical { width:10px; background:rgb(140,140,140); border-radius:5px; } QScrollBar::handle:vertical:.
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
09-17
主要介绍了python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例,需要的朋友可以参考下
QSS样式
03-11
QSS样式，样式不全，但都是工作共总结出来的干货， QTableWidget、QTreeWidget、QScrollBar等滚动条或者含有滚动条的控件样式设置
基于QT+C++实现的文本或窗口炫酷有趣的滚动条-果冻条+源码
最新发布
05-02
用法链接：https://menghui666.blog.csdn.net/article/details/138399230?spm=1001.2014.3001.5502 该项目实现了文本或窗口纤细的滚动条——果冻条 一个可以像弓弦一样拉出来，并且来回弹动的普通滚动条。 思路...
QT各种控件常用样式表qss示例
野生猿-群号1025127672
07-11 2482
如上图所示，表头的文字区域，变成了颜色更深的深绿色，这是因为这个区域的颜色，实际上是3层颜色的叠加：QTableView整体的绿色+QHeadView表头整体的黑色半透明+section表头文字区域黑色半透明。这个控件比较复杂，里面包含了滑动条、表头（又细分为内容区/空白区）、表格、整体、左上角按钮等多种不同的元素，他们之间有复杂的叠层关系。下面设置表头背景色，黑色，半透明，透明度为50。发现这个绿色背景并没有作用于整体，表头部分仍然为白色，那是因为表头在顶层，遮住了QTableView的绿色背景。
QSS之QScrollArea
chenyijun的专栏
09-30 969
QScrollArea在实际的开发过程中经常使用，主要是有些界面一屏显示不下，所以得用QScorllArea带滚动条拖动显示剩余的界面。默认的QScrollArea滚动条不满设计的风格，因此我们必须设置自已的滚动条风格，QScrollBar分为水平horizontal和垂直vertical，在设置的过程中常见的属性如下：
Qt工作笔记-QSS中关于QScrollBar的设置
IT1995的博客
08-23 8623
如下面的这个QSS代码： QScrollBar:vertical{ width:16px; border:1px solid rgb(255,0,0); margin:0px,0px,0px,0px; padding-top:16px; padding-bottom:16px; } 程序运行截图如下： 提示：rgb(255,0,0)为红色，padding-top与padding-bot...
QScrollBar样式表（带注释）
雒珣的博客
07-22 3045
QT QScrollBar setStyleSheet 样式
Qt扫盲-QScrollBar理论总结
洪源兄
12-15 4155
QScrollBar其实就是一个滚动条控件，它使用户能够访问大于用于显示文档的小组件的文档部分。它提供了用户在文档中的当前位置以及可见的文档量的可视指示。滚动条通常配备其他控件，以实现更准确的导航。Qt以适合每个平台的方式显示滚动条。滚动条的本质就是因为需要显示的内容已经超出窗口的大小，就需要用这个滚动条来控制和指示当前的位置。
Qt QScrollBar滚动条样式设置
随笔
11-14 8634
Qt QScrollBar滚动条样式设置
QT之qss教程- QScrollBar
热门推荐
wzs的博客
11-10 1万+
1、正常模式，如图 QScrollBar:horizontal { border:2px solid red; background:#32CC99; height:15px; margin:0px 20px 0px 20px; } /* 滑动块设置 */ QScrollBar::handle:horizontal { /* 颜色 */ background:white;
qss样式，关于QScrollBar滚动条
weixin_51965272的博客
04-05 926
QScrollBar:horizontal{width:8px;background:transparent;} QScrollBar::handle:horizontal{background:rgb(224,224,224); width:5px; border-radius:3px;} QScrollBar::up-arrow:horizontal{border:none;} QScrollBar::sub-line:horizontal{background:transparent;} QScrol
QScrollbar进行垂直滚动条qss详细设置
wanfengnianhua的专栏
05-14 1274
QScrollBar::vertical { margin: 13px 50px 13px 50px; background-color: rgb（255， 255， 255， 100）; border:0px; width:12px; } .QScrollBar::handle:vertical { background-color:purple; width:12px; } QScrollBar::add-page:vertical { background-color:pink;
qt QScrollBar
09-13
在Qt中，QScrollBar类是一个用于显示和控制滚动条的控件。它提供了对滚动条的各种属性和方法进行设置和操作。下面是关于QScrollBar的一些重要信息： 1. QScrollBar的界面属性：根据引用中的描述，QScrollBar具有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值