Qt使用QSS对horizontalSlider进行样式设置
Qt 设置 进行 样式 QSS 使用
2023-09-14 08:57:11 时间
相关资料:
https://mingshiqiang.blog.csdn.net/article/details/109545804
https://blog.csdn.net/parkchorong/article/details/102629913
https://blog.csdn.net/qq_33559992/article/details/85331081 Qt QSS常用样式总结
效果5如图:
水平的QSlider
QSlider { background-color: #363636; border-style: outset; border-radius: 10px; } QSlider::groove:horizontal { height: 12px; background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); margin: 2px 0 } QSlider::handle:horizontal { background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green); width: 16px; height: 16px; margin: -5px 6px -5px 6px; border-radius:11px; border: 3px solid #ffffff; }
竖直的QSlider
QSlider { background-color: rgba(22, 22, 22, 0.7); padding-top: 15px; /*上面端点离顶部的距离*/ padding-bottom: 15px; border-radius: 5px; /*外边框矩形倒角*/ } QSlider::add-page:vertical { background-color: #FF7826; width:5px; border-radius: 2px; } QSlider::sub-page:vertical { background-color: #7A7B79; width:5px; border-radius: 2px; } QSlider::groove:vertical { background:transparent; width:6px; } QSlider::handle:vertical { height: 14px; width: 14px; margin: 0px -4px 0px -4px; border-radius: 7px; background: white; }
效果2:增加图片
#horizontalSlider::groove:horizontal { border: 1px solid gray; border-radius:2px; height: 4px; left: 12px; right: 12px; } /*滑条*/ #horizontalSlider::handle:horizontal { border: 1px solid gray; border-image:url(":/image/images/b.png"); width: 20; margin: -5px -5px -5px -5px; } /*已经划过的*/ #horizontalSlider::sub-page:horizontal{ background: #D1CE21; }
效果3
QSlider::groove:horizontal { border: 1px solid #bbb; background: white; height: 10px; border-radius: 4px; } QSlider::sub-page:horizontal { background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1, stop: 0 #bbf, stop: 1 #55f); border: 1px solid #777; height: 10px; border-radius: 4px; } QSlider::add-page:horizontal { background: #fff; border: 1px solid #777; height: 10px; border-radius: 4px; } QSlider::handle:horizontal { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #eee, stop:1 #ccc); border: 1px solid #777; width: 13px; margin-top: -2px; margin-bottom: -2px; border-radius: 4px; } QSlider::handle:horizontal:hover { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd); border: 1px solid #444; border-radius: 4px; } QSlider::sub-page:horizontal:disabled { background: #bbb; border-color: #999; } QSlider::add-page:horizontal:disabled { background: #eee; border-color: #999; } QSlider::handle:horizontal:disabled { background: #eee; border: 1px solid #aaa; border-radius: 4px; }
效果4:
/* 一定要先设置groove,不然handle的很多效果将没有*/ QString sliderstyle = QString("QSlider::groove:horizontal{border:none; height:12px; border-radius:6px; background:rgba(0, 19, 39, 100);}" /* 上下边距和左右边距*/ "QSlider::handle:horizontal{border:none; margin:-5px 0px; width:22px; height:22px; border-radius:20px;" "border-image:url(:/new/prefix1/64.png);}" /*划过部分*/ "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}" /*未划过部分*/ "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}"); ui->horizontalSlider->setStyleSheet(sliderstyle);
效果5:
"QSlider::groove:horizontal{border:none; height:73px; border-radius:6px; border-image:url(:/new/prefix1/b1.png);}" /* 上下边距和左右边距*/ "QSlider::handle:horizontal{border:none; margin:20px 0px; width:22px; height:22px; border-radius:20px;" "border-image:url(:/new/prefix1/ZZ64.png);}" /*划过部分*/ "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}" /*未划过部分*/ "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}" );
https://images.cnblogs.com/cnblogs_com/FKdelphi/1786386/o_210629090015horizontalslider%E7%9A%84QSS5.gif
相关文章
- QT学习笔记:菜单栏与工具栏
- Qt-Qt使用回调函数方(callback)
- Qt-Qt之QDesktopWidget的使用说明(屏幕个数、屏幕分辩率、屏幕PDI、设置屏幕分辩率)
- Qt-QSqlDatabasePrivate::addDatabase: duplicate connection name 'qt_sql_default_connect...
- QT-Qt设置背景图片
- Qt 5.7设置调试器
- Qt设置程序界面风格
- 【Qt】QModbusDeviceIdentification类
- Qt 使用QNetworkAccessManager实现Http操作
- Qt QSlider介绍(属性设置、信号、实现滑块移动到鼠标点击位置)
- Qt 设置QLineEdit控件不可编辑、密文输入、输入格式等小技巧
- Qt Qss 渐变颜色设置
- 【Qt】在ubuntu上为可执行程序qt创建图标(亲测)
- 【Qt】解决qmake编译错误:could not exec ‘/usr/lib/x86_64-linux-gnu/qt4/bin/qmake‘: No such file or directory
- qt之QPainter绘制不规则图形
- VLC-Qt 入门指南
- Qt 隐藏标题栏可移动升级版
- Qt弹簧设置宽和高
- vs2015中无法设置Qt版本,qt project setting 是灰色,Qt无法编译ui文件
- Qt Quick 布局演示
- Qt中子窗口关闭之后,立即释放资源的方法
- QT TextEdit设置背景、明文加密、弹出网站、弹出自定义对话框、gif动态图片、程序启动动画、打包程序、关闭事件
- Qt数据库应用10-通用数据库设置