QScrollBar样式
2013-12-07 16:05
239 查看
滚动条在Qt里叫做QScrollBar,使用样式设置控件的外观很方便,这里分享一下滚动条的样式设置。例如下面的树形控件的滚动条的样式。
const QString VSCROLLBAR_STYLE =
"QScrollBar:vertical {margin: 13px 0px 13px 0px;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; }\
.QScrollBar::sub-page:vertical {background-color: orange; }\
.QScrollBar::sub-line:vertical {subcontrol-origin: margin; border: 1px solid red; height:13px}\
.QScrollBar::up-arrow:vertical { subcontrol-origin: margin; background-color: blue; height:13px}\
.QScrollBar::down-arrow:vertical { background-color: yellow; }\
.QScrollBar::add-line:vertical {subcontrol-origin: margin; border: 1px solid green; height:13px}";
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/9973b0369067a90532b541f028dfff8b.jpg)
QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分,这几个相应的部位都己经在上面画出来了。sub-line包含了up-arrow,而add-line则包含了down-arrow区域。
需要注意的是,如果不对sub-line、add-line设置subcontrol的话,会出现下面的问题。如果不设置整个QScrollBar的marg-left和margin-bottom话,则不能定制add-line和sub-line区域。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/369cf9a527c00a4b4acd27c91329ff6d.jpg)
没有定义sub-control为margin
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/cd2fb680eaa1fb5888967c6d68f8aa82.jpg)
没有定义margin-top和margin-bottom
const QString VSCROLLBAR_STYLE =
"QScrollBar:vertical {margin: 13px 0px 13px 0px;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; }\
.QScrollBar::sub-page:vertical {background-color: orange; }\
.QScrollBar::sub-line:vertical {subcontrol-origin: margin; border: 1px solid red; height:13px}\
.QScrollBar::up-arrow:vertical { subcontrol-origin: margin; background-color: blue; height:13px}\
.QScrollBar::down-arrow:vertical { background-color: yellow; }\
.QScrollBar::add-line:vertical {subcontrol-origin: margin; border: 1px solid green; height:13px}";
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/9973b0369067a90532b541f028dfff8b.jpg)
QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分,这几个相应的部位都己经在上面画出来了。sub-line包含了up-arrow,而add-line则包含了down-arrow区域。
需要注意的是,如果不对sub-line、add-line设置subcontrol的话,会出现下面的问题。如果不设置整个QScrollBar的marg-left和margin-bottom话,则不能定制add-line和sub-line区域。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/369cf9a527c00a4b4acd27c91329ff6d.jpg)
没有定义sub-control为margin
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/cd2fb680eaa1fb5888967c6d68f8aa82.jpg)
没有定义margin-top和margin-bottom
相关文章推荐
- css @语法,@规则 @import @charset @font-face @fontdef @media @page
- CSS3实现各种纹理背景效果
- 用.NET创建并且覆盖AutoCAD的标注样式
- 转 CSS hack:针对IE6,IE7,firefox显示不同效果
- CSS最常用和实用的技巧
- css默认样式
- 10gR2 CRS case study: CRS would not start after reboot - stuck at /etc/init.d/init.cssd startcheck
- CSS多行文本垂直居中的方法
- css去掉a标签点击后的虚线框
- 最全的CSS浏览器兼容问题【CSS技巧 】
- 最全的CSS浏览器兼容问题【FF与IE】
- css3 前端开发
- css的reset
- 上传控件CSS用图片代替
- css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别
- CSS无序列实现表宽度自适应的表格
- 不可不看!CSS3中三十一种选择器用法
- CSS中常用中文字体的Unicode编码对照
- css隐藏父元素,不隐藏子元素
- 35个让人惊讶的 CSS3 动画效果演示