【QSS样式表 - ⑬】：QScrollBar控件样式

最新推荐文章于 2025-09-30 08:21:42 发布
原创 最新推荐文章于 2025-09-30 08:21:42 发布 · 632 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#PyQt5 #PySide6 #QtDesigner #QSS

文章目录

QScrollBar控件样式

  1. 常用属性
    在这里插入图片描述
  2. 伪状态
    在这里插入图片描述
  3. 子控件
    在这里插入图片描述

QSS示例

  1. 新建一个 QMainWindow 窗口，在其中放置两个 QScrollBar 控件。
    在这里插入图片描述
  2. 如下所示。
QScrollBar:vertical{
   
   
	border: 2px solid blue;
	background-color: yellow;
	width: 16px;
	margin: 20px 0px 20px 0px;
}

QScrollBar::handle:vertical{
   
   
	min-width: 40px;
}

QScrollBar:horizontal
最低0.47元/天 解锁文章
QScrollBar样式表总结
草上爬的博客
11-16 6687
具体的style sheet代码，这里面的CSS代码还可以写得更优雅一些，反正是起作用了，没太大兴趣再去继续弄。如图所示，QTableView使用的QHeaderView与scrollbar的style。当然，不用背景图也是可以的，下面是使用QSS实现扁平滚动条，只有几个简单的颜色。为了更符合扁平风格，去掉了滚动条两端的箭头。☆鼠标放到handle上的背景色。☆handle的背景色。
【QSS样式表 - ⑦】：QCheckBox控件样式
Oh_Python的博客
12-23 481
【代码】【QSS样式表 - ⑦】：QCheckBox控件样式。
QScrollBar样式 - qss样式表学习
热门推荐
wang13342322203的博客
09-13 1万+
QScrollBar样式 滚动条在Qt里叫做QScrollBar，使用样式设置控件的外观很方便，这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。 const QString VSCROLLBAR_STYLE = “QScrollBar:verTIcal {margin： 13px 0px 13px 0px;background-color： rgb（255， 255， 255...
PyQt QScrollBar 小部件详解
最新发布
浩瀚之水的专栏
09-30 485
PyQt5中的QScrollBar控件教程摘要：QScrollBar是PyQt5中用于实现滚动功能的控件，可水平或垂直使用。文章通过多个示例演示了其基本用法、常用方法和实际应用场景，包括：1. 基本滚动条创建；2. 自定义样式设置；3. 与内容同步的实现；4. 在图片查看器、音频播放器和文本编辑器等场景中的应用。还介绍了最佳实践，如设置合理范围、页面步长、键盘支持和性能优化等注意事项。
QScrollBar样式
MoMo_KUA_1的专栏
08-01 3691
QScrollBar样式       滚动条在Qt里叫做QScrollBar，使用样式设置控件的外观很方便，这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。 const QString VSCROLLBAR_STYLE =             "QScrollBar:vertical {margin: 13px 0px 13px 0px;background-col
QScrollBar QSS美化样式表【vertical（垂直）和horizontal（水平）滚动条】
HG的博客
01-24 1009
QT QScrollBar vertical horizontal QSS 仿Windows滚动条 垂直滚动条 水平滚动条 ElaWidgetTools
QSS实践汇总（1）——QScrollBar样式、滚动条样式（风格）
m0_51668269的博客
11-06 8704
1、特别说明 （1）本文参考了网上资料，特别是如下QScrollBar区域描述非常详细 QScrollBar样式 - qss样式表学习_wang13342322203的博客-优快云博客_qscrollbar样式 （2）以下部分为QScrollBar样式原创，分为水平方向及垂直方向，同大家共同学习分享 2、注意事项 （1）上下火左右箭头风格不生效时，查看以下两个属性是否设置 subcontrol-position:left; subcontrol-origin:margin; （2）QScr
QScrollBar样式表
C++初学者
11-27 1353
滑动条分横向（horizontal）和纵向（vertical） QScrollBar:horizontal{ Border:2px solid red; Margin:0px 20px 0px 20px; } //滑块设置 QScrollBar::handle:horizontal{ Min-width:20px;//长度 } //顶部控制块 QScrollBar::ad...
【QSS样式表 - ⑫】：QProgressBar控件样式
Oh_Python的博客
12-24 697
【代码】【QSS样式表 - ⑫】：QProgressBar控件样式。
【QSS样式表 - ④】：QLabel控件样式
Oh_Python的博客
12-22 312
【代码】【QSS样式表 - ④】：QLabel控件样式。
【QSS样式表 - ⑰】：QTabWidget控件样式
Oh_Python的博客
12-25 715
【代码】【QSS样式表 - ⑰】：QTabWidget控件样式。
QScrollBar完整的样式表
Black_Silencer的博客
10-26 4383
一、水平滚动条 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 样式表
zp33
12-01 1338
qt 滚动条
QScrollBar样式表（带注释）
雒珣的博客
07-22 4136
QT QScrollBar setStyleSheet 样式
QScrollerBar样式
weixin_43956958的博客
12-20 1434
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; /*左
QTextEdit{ background-color: rgb(173,231,186);} QScrollBar:vertical { background-color: rgb(173,231,186); } QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { background-color: rgb(173,231,186); } QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background-color: none; }还是没用
08-26
你已经尝试了多个 QSS 设置，但滚动条轨道颜色仍然没有生效，说明你可能没有完全理解 **QScrollBar** 各个子控件的结构和样式机制。 --- ## 🔍 问题分析 你在样式表中设置了： ```css QTextEdit { background-color: rgb(173,231,186); } QScrollBar:vertical { background-color: rgb(173,231,186); } QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { background-color: rgb(173,231,186); } QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background-color: none; } ``` 但滚动条轨道颜色仍然无效，**原因可能有以下几种**： --- ## ✅ 正确做法：完整设置 QScrollBar 的样式 以下是一个**完整且经过验证的样式表**，可以正确设置 `QTextEdit` 的滚动条轨道颜色。 ### ✅ 示例代码（PyQt5） ```python self.text_edit.setStyleSheet(""" QTextEdit { background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 5px; } /* 垂直滚动条整体设置 */ QScrollBar:vertical { width: 12px; margin: 0px 0px 0px 0px; } /* 滚动条轨道部分（上下两段） */ QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { background-color: rgb(173,231,186); height: 0px; /* 可选：隐藏箭头按钮 */ } /* 滚动条滑块 */ QScrollBar::handle:vertical { background-color: #A0A0A0; min-height: 20px; border-radius: 6px; } /* 滚动条滑块上下空白区域 */ QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background-color: none; } """) ``` --- ## 🧠 为什么你的设置没用？ | 你设置的内容 | 是否生效 | 原因 | |-------------|----------|------| | `QScrollBar:vertical { background-color: ... }` | ❌ | 这个设置不会影响滚动条轨道的颜色 | | `QScrollBar::add-line:vertical` | ✅ | 应该设置这个 | | `QScrollBar::sub-line:vertical` | ✅ | 应该设置这个 | | `QScrollBar::handle:vertical` | ✅ | 滑块颜色 | | `QScrollBar::add-page` / `sub-page` | ✅ | 通常设为 none | --- ## 🧪 简化测试代码（验证是否生效） 你可以用以下**极简样式**测试滚动条轨道是否生效： ```python self.text_edit.setStyleSheet(""" QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { background-color: rgb(173,231,186); } """) ``` 如果这个设置了仍然没颜色，说明： - 你可能没有启用样式表（比如父控件样式覆盖） - 或者你设置在了错误的控件上（比如设置在 `QApplication` 或 `QWidget` 上） --- ## ✅ 建议做法：将样式表设置到 QTextEdit 控件本身 ```python self.text_edit.setStyleSheet("你的样式") ``` 而不是设置在窗口（`QWidget`）或布局上。 --- ## 💡 小技巧 - 使用 `border: 1px solid red;` 测试是否样式生效。 - 使用 `QScrollBar::handle:vertical:hover { background: yellow; }` 测试是否悬停生效。 - 如果样式未生效，可能是被全局样式覆盖，请使用 `setStyleSheet()` 明确设置。 --- ## ❓相关问题 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街 三 仔

你的鼓励是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值