Qt QSS之QSlider滑动条美化
2021/4/28 10:27:15
本文主要是介绍Qt QSS之QSlider滑动条美化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很多,选择器要少,可以使用的QSS属性也要少很多,并不是所有的属性都可以用在Qt的所有控件上。
下面我们来使用qss对滑动条slider进行美化。先上图。
这里蓝色背景并非用qss美化,主要研究滑动条的美化过程。
1 //滑动条槽(整体)的美化 2 QSlider::groove:horizontal{ 3 height: 12px; 4 left: 0px; 5 right: 0px; 6 border:0px; //指定无边框 7 border-radius:6px; //指定圆角 8 background:rgba(0,0,0,50); 9 } 10 //滑块的美化 11 QSlider::handle:horizontal{ 12 width: 50px; 13 height: 50px; 14 margin-top: -20px; 15 margin-left: 0px; 16 margin-bottom: -20px; 17 margin-right: 0px; 18 border-image:url(:/res/images/setting_slider_handle.png); 19 } 20 //已滑过的进度美化 21 QSlider::sub-page:horizontal{ 22 background:rgba(80,166,234,1); 23 }
这里解释一下,我们只用到groove,handle,sub-page这3个属性,就可完成属性,未滑过的颜色就是groove的颜色。当然也能指定未滑过部分的颜色即:
1 QSlider::add-page:horizontal 2 { 3 background: rgb(0,0,255); 4 }
注意的是groove,sub-page,add-page三个属性共存时,add-page颜色会覆盖groove的颜色。如果滑块需要外扩比槽部分大,那么可以使用margin参数,当然QSilder测整体高度必须大于或等于滑块的高度,否则滑块会被压缩。
我们例子滑块使用的是图片 ,groove,handle,sub-page,add-page这些既可以用颜色填充也可以用图片填充,要看自己需求。当然如果要炫一点可以用线性渐变颜色,
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd);
来定义自己的渐变颜色。
此外我们还可以对这些部件不同状态的一些指定比如,hover,disable
1 QSlider::handle:horizontal:hover { 2 width: 50px; 3 height: 50px; 4 margin-top: -20px; 5 margin-left: 0px; 6 margin-bottom: -20px; 7 margin-right: 0px; 8 border-image:url(:/res/images/setting_slider_handle_hover.png); 9 } 10 QSlider::sub-page:horizontal:disabled { 11 background: #BB345F; 12 } 13 QSlider::add-page:horizontal:disabled { 14 background: #1ADEFF; 15 } 16 QSlider::handle:horizontal:disabled { 17 background: #EEDDFF; 18 }
这样在hover或者设置无效状态时,颜色就有改变。
这篇关于Qt QSS之QSlider滑动条美化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)