qt Qss 边框渐变

目录

背景渐变

方案一 Qss

方案二 paintEvent函数

方案三 QGraphicsDropShadowEffect投影效果


背景渐变

QT里面背景是可以渐变,其中qlineargradient里面参数意思

spread:渐变方式(具体可以查看qt帮助文档搜索PadSpread)

坐标x1、y1、x2、y2:分别代表渐变方向,可以认为是向量方式

stop:可以理解每段从某个颜色到结束渐变

background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(0, 0, 0, 255), stop:0.5 rgba(255, 255, 255, 255));

详细 可以参考官方文档或者博客。这里主要给出渐变线的方案

方案一 Qss

用渐变背景方式渐变线

QPushButton* button = new QPushButton("Button", this);
button->setStyleSheet("border: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #FF0000, stop: 1 #00FF00); border-radius: 5px;");

可以看出效果并不好,(如果四周都有倒角不建议这样处理,个别情况不太好处理

针对各个边设置

QPushButton* button = new QPushButton("Button", this);
button->->setStyleSheet("background:#1E1E1E;border-style:transparent;\border-top: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.3 #007FFA,stop: 0.6 #007FFA,stop: 0.9 #007FFA,stop: 1 #007FFA);\border-left: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.7 #1E1E1E);\border-right: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.7 #1E1E1E);border-top-left-radius:5px;border-top-right-radius:5px;");

 

效果像这个样式,但是如果下面加角度好像效果并不太好

方案二 paintEvent函数

使用QPainter绘制:你可以通过重写按钮的paintEvent函数,使用QPainter来绘制按钮的边框。在绘制过程中,你可以使用QLinearGradient来创建渐变效果,并使用QPen来设置边框的样式。 

void MyButton::paintEvent(QPaintEvent* event)
{QPushButton::paintEvent(event);QPainter painter(this);QLinearGradient gradient(rect().topLeft(), rect().bottomRight());gradient.setColorAt(0, QColor("#FF0000"));gradient.setColorAt(1, QColor("#00FF00"));QPen pen(gradient, 2);painter.setPen(pen);painter.setBrush(Qt::NoBrush);painter.drawRect(rect().adjusted(1, 1, -1, -1));
}

方案三 QGraphicsDropShadowEffect投影效果

使用QGraphicsEffect:你可以使用Qt的图形效果框架来实现按钮的渐变边框效果。首先,你可以创建一个QGraphicsEffect对象,并将其设置为按钮的图形效果。然后,你可以使用QLinearGradient来创建渐变效果,并将其设置为QGraphicsEffect的属性。

QGraphicsDropShadowEffect* effect = new QGraphicsDropShadowEffect(this);
QLinearGradient gradient(rect().topLeft(), rect().bottomRight());
gradient.setColorAt(0, QColor("#FF0000"));
gradient.setColorAt(1, QColor("#00FF00"));
effect->setColor(gradient);
button->setGraphicsEffect(effect);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/3061.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

走进人工智能|机器学习 解码未来的科技革命

前言: 机器学习的发展为我们提供了更智能、高效和便捷的科技产品和服务,可以改善我们的生活和工作方式。 文章目录 序言背景解码未来的科技革命技术支持应用领域程序员如何学总结 序言 机器学习是一种人工智能领域的技术,它让计算机通过数据自动地学习和…

SpringBoot 整合redis + Aop防止重复提交 (简易)

1.redis的安装 redis下载 解压 安装 # wget http://download.redis.io/releases/redis-6.0.8.tar.gz # tar xzf redis-6.0.8.tar.gz # cd redis-6.0.8 # make 看一下就会有 进入redis-6.0.8下的src目录 [rootVM-16-8-centos redis]# cd redis-6.0.8 [rootVM-16-8-centos re…

GPT模型训练实践(2)-Transformer模型工作机制

Transformer 的结构如下,主要由编码器-解码器组成,因为其不需要大量标注数据训练和天然支持并行计算的接口,正在全面取代CNN和RNN: 扩展阅读:What Is a Transformer Model? ​ ​ 其中 编码器中包含自注意力层和前馈…

STM32速成笔记—IWDG

文章目录 一、IWDG简介二、STM32的IWDG2.1 STM32的IWDG简介2.2 喂狗2.3 IWDG框图 三、IWDG配置步骤四、IWDG配置程序4.1 IWDG初始化程序4.2 喂狗 五、应用实例 一、IWDG简介 独立看门狗(Independent Watchdog, IWDG),什么是看门狗&#xff1…

Spring Cloud 之注册中心 Eureka 精讲

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

【SpringCloud config分布式配置中心】—— 每天一点小知识

💧 S p r i n g C l o u d c o n f i g 分布式配置中心 \color{#FF1493}{SpringCloud config分布式配置中心} SpringCloudconfig分布式配置中心💧 🌷 仰望天空,妳我亦是行人.✨ 🦄 个人主页——微风撞见云的…

软考A计划-系统集成项目管理工程师-项目范围管理(四)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

图像处理实战02-yolov5目标检测

yolov5 YOLOv5 是一种目标检测算法,它是 YOLO (You Only Look Once) 系列算法的最新版本。YOLOv5 采用了一种新的架构,它包括一个基于 CSPNet (Cross Stage Partial Network) 的主干网络以及一系列改进的技巧,如多尺度训练、数据增强、网络混…

chatgpt 用来取名字

Object ,array 相对 string,int 来说是什么类型, 分别用英文名称来定义他们的类型类别

自动化测试常见的三大问题及解决方案

各位小伙伴们,大家好,今天给大家带来的是关于自动化测试常见的三大问题及解决方案,希望给遇到这三大问题的你一些帮助 一,就是我们定位元素的时候,定位不到或有时定位得到,有时定位不到。 特别是喜欢复制…

Mysql数据库初体验

文章目录 MySQL数据库一.数据库的基本概念1.数据库的组成(1)数据(Data)(2)表(3)数据库(4)数据库管理系统(DBMS)(5)数据库系统 2.数据库系统发展史3.主流数据库介绍4.数据库分为关系型与非关系型(1)关系型:SQL(2)非关系…

node.js通过node-java库调用java接口(jar包)

node.js通过node-java库调用java接口 1、业务需要2、开发环境3、调用java包简单实例4、调用自定的jar包接口 1、业务需要 最近因项目需求,需要调用第三方java的打的jar包,但项目后端是用node.js写的,因此需要用node.js调用第三方jar,网上搜集…