Qt QSS之QSlider滑动条美化
首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很多,选择器要少,可以使用的QSS属性也要少很多,并不是所有的属性都可以用在Qt的所有控件上。
下面我们来使用qss对滑动条slider进行美化。先上图。
这里蓝色背景并非用qss美化,主要研究滑动条的美化过程。
本文福利,莬费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QT嵌入式开发,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓
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开发学习资料包、技术视频,内容包括(C++语言基础,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QT嵌入式开发,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓
相关文章
- Qt:windows下Qt安装教程
- QT QMapIterator
- C++学习:从基础到QT实现
- C语言模拟QT的信号与槽功能
- Qt官方示例-通讯录
- Qt官方示例-标签对话框
- Ubuntu18.04下Qt出现qt.qpa.plugin:Could not load the Qt platform plugin “xcb“问题解决方法
- Qt信号与槽机制详解
- Qt QFileSystemModel功能及用法详解
- Linux下编译Qt程序的技术指南(linux编译qt程序)
- Linux环境下Qt交叉编译实战(linux交叉编译qt)
- 技术深入探索Linux下的Qt开发(基于linux的qt开发)
- 开发Linux下用Qt开发:简单易用的开发方式(linux用qt)
- Linux下的Qt编译器之旅(qt编译器linux)
- 安装轻松实现Qt在Linux系统下的U盘安装(qtlinuxu盘)
- 数据库使用Qt连接Oracle数据库:一步一步实现(qt连接oracle)
- Linux下Qt编程实战指南(linuxqt编程)
- QT实现对Oracle数据库的操作教程(qt操作oracle)
- 如何在Qt应用程序中访问MySQL数据库?(qt访问mysql)
- Linux系统中实现Qt串口通信的完美指南(qt串口通信linux)
- Qt在Linux下如何启动:简易教程(qtlinux下启动)
- Linux环境下如何卸载Qt应用(linux卸载qt)
- Qt在Linux操作系统中的运行和应用(qt运行linux)
- Qt与MySQL数据库的编程实践。(qtmysql编程)