06 Qt自绘组件:Switch动画开关组件

系列文章目录

01 Qt自定义风格控件的基本原则-CSDN博客

02 从QLabel聊起:自定义控件扩展-图片控件-CSDN博客

03 从QLabel聊起:自定义控件扩展-文本控件-CSDN博客

04 自定义Button组件:令人抓狂的QToolButton文本图标居中问题-CSDN博客

05 扩展组件:自定义CheckBox组件-CSDN博客


目录

系列文章目录

前言

一、示意效果

二、实现思路

1.概述

2.功能接口举例

3.部分渲染代码

1.动画触发时机

2.响应动画的数值变化以及状态变化

 3.根据动画中间差值,渲染背景以及Handle

3.1 渲染Switch背景色 

3.2 渲染Swith滑块 

总结


前言

开关控件(Switch Control)不在Qt基本组件库里面,但是在我们的日常业务开发中极其常见。

开关控件通常用于在用户界面中表示两种状态(打开和关闭、开和关等),用户可以通过点击或拖动来切换状态。然而, 如果单纯的根据两种状态进行Icon的切换又略显单调些,所以本篇想向大家分享的是具有开关动画效果的Switch按钮组件!

既聊代码也说思路,我们开始今天的动画Swich动画开关组件的分享!


一、示意效果

二、实现思路

1.概述

1.为了沿用Qt 按钮组件的基本功能接口,所以我们继承的基类应该选择QAbstractButton而不是QWidget

2.从Swich组件的元素来看,我们可以拆解为三部分逻辑:

  •         圆角矩形背景
  •         圆形滑块
  •         滑块左右移动的动画

综上所述,我们需要用到的模块包括:

  •         QPainterPath类:Qt 中用于描述和绘制复杂图形路径的类
  •         QVariantAnimation:Qt 中用于执行属性动画的类,它可以用于对任意类型的属性进行动画效果的处理

2.功能接口举例

class QUIEXTPLUGIN_EXPORT QUiSwitchButton : public QAbstractButton
{Q_OBJECTenum AnimationType{None= 0,      //静态状态下OnAnimation ,//打开动画从左向右滑动OffAnimation,    //关闭动画从右向左滑动};
public:QUiSwitchButton(QWidget *parent);~QUiSwitchButton();//设置开状态下文本色void setSwitchOnTextColor(const QColor& clr);//设置关状态下文本色void setSwitchOffTextColor(const QColor& clr);//设置开状态下背景色void setSwitchOnColor(const QColor& clr);//设置关状态下背景色void setSwitchOffColor(const QColor& clr);//设置diasbale颜色void setSwitchDisableColor(const QColor& clr);//设置滑块背景色void setHandleColor(const QColor& clr);
protected:void mouseReleaseEvent(QMouseEvent *pEvt) override;void paintEvent(QPaintEvent *e) override;void drawBackground(QStylePainter*);void drawHandler(QStylePainter*);//void startAnimation();double getCurAnimaValue()const;QColor styledBackgroundColor()const;
protected slots:void handleAnimValueChanged(QVariant val);void handleAnimStateChanged(QVariantAnimation::State);
private:QPointer<QVariantAnimation> m_pAnima;QColor m_clrOnText;QColor m_clrOffText;QColor m_clrOn;QColor m_clrOff;QColor m_clrDisable;QColor m_clrHandler;int m_iHandlerMargin;double m_dCurFrame;AnimationType m_eCurAniType;
}

3.部分渲染代码

1.动画触发时机

void QUiSwitchButton::mouseReleaseEvent(QMouseEvent *pEvt)
{startAnimation();QAbstractButton::mouseReleaseEvent(pEvt);
}

2.响应动画的数值变化以及状态变化


void QUiSwitchButton::handleAnimStateChanged(QVariantAnimation::State curState)
{if (QVariantAnimation::Stopped == curState){m_eCurAniType = None;}update();
}

void QUiSwitchButton::handleAnimValueChanged(QVariant val)
{m_dCurFrame = val.toDouble();update();
}

 3.根据动画中间差值,渲染背景以及Handle


void QUiSwitchButton::paintEvent(QPaintEvent *pEvt)
{Q_UNUSED(pEvt);QStylePainter paint(this);paint.setRenderHints(QPainter::Antialiasing);drawBackground(&paint);drawHandler(&paint);drawText(&paint);
}

PS:这里要说的是,渲染顺序是有规则的,要根据元素的层级以及依赖顺序来决定 

3.1 渲染Switch背景色 

这里要注重点的是QPainterPath的使用以及其渲染规则的不同效果!


void QUiSwitchButton::drawBackground(QStylePainter* paint)
{QRect rcFrame = contentsRect();QRect rcLeft = rcFrame;//左边圆弧QRect rcMiddle = rcFrame;//中间矩形QRect rcRight = rcFrame;//右边圆弧QPainterPath path;path.setFillRule(Qt::WindingFill);//设置填充规则//左rcLeft.setWidth(rcLeft.height());path.addEllipse(rcLeft);//中rcMiddle.adjust(rcLeft.width() / 2, 0, -rcLeft.width() / 2, 0);path.addRect(rcMiddle);//右rcRight.adjust(rcMiddle.width(), 0, 0, 0);path.addEllipse(rcRight);paint->fillPath(path, styledBackgroundColor());
}
3.2 渲染Swith滑块 

这里的重点则是实时计算滑块的中心位置并计算


void QUiSwitchButton::drawHandler(QStylePainter* paint)
{//以滑块中心为分界点QRect rcFrame = contentsRect();QRect rcHandler;int iAnimSpan = rcFrame.width() - rcFrame.height();QPoint ptCenter(rcFrame.width() - rcFrame.height() / 2 - iAnimSpan * (1.0 - getCurAnimaValue()), rcFrame.height() / 2);rcHandler = QRect(ptCenter.x() - rcFrame.height() / 2, 0, rcFrame.height(), rcFrame.height());rcHandler = rcHandler.marginsRemoved(QMargins(m_iHandlerMargin, m_iHandlerMargin, m_iHandlerMargin, m_iHandlerMargin));QPainterPath path;path.addEllipse(rcHandler);paint->fillPath(path, m_clrHandler);
}

总结

以上就是今天要分享的:Qt如何自绘 Switch开关动画按钮的内容!

既聊思路,也说代码!我们下次继续分享自定义风格扩展组件!

PS:本专栏所有篇幅涉及的UI扩展组件类,后面会封装成插件动态库,感兴趣的同学可以留言哦!

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

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

相关文章

js中的任务处理机制

众所周知(不知道的话去查)&#xff0c;js是以单线程的方式执行的&#xff0c;在执行的过程中&#xff0c;某一时刻上只能执行一个任务&#xff0c;也就是说&#xff0c;我们写好了代码后执行的时候&#xff0c;程序是根据代码从上到下依次排队执行&#xff0c;只有上一个任务执…

数据分析案例-社交媒体情绪数据集可视化分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

进程的控制

文章目录 进程退出进程等待进程程序替换 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站。 进程退出 进程的退出一共有三种场景。 程序跑完…

了解 Go 中原子操作的重要性与使用方法

引言 并发是现代软件开发的一个基本方面&#xff0c;而在 Go 中编写并发程序相对来说是一个相对轻松的任务&#xff0c;这要归功于其强大的并发支持。 Go 提供了对原子操作的内置支持&#xff0c;这在同步并发程序中起着至关重要的作用。在本篇博客文章中&#xff0c;我们将探…

别再让机会从指缝间溜走!社科院与杜兰大学金融管理硕士一同开创你的成功之路

新的一年&#xff0c;你的读研计划进行到哪个环节了呢&#xff1f;咨询社科院与杜兰大学金融管理硕士项目中&#xff0c;总听到有同学说&#xff0c;不着急&#xff0c;我先了解一下。你不知道是时间总是在指缝间溜走。别让犹豫成了我们前进的阻碍&#xff0c;马上行动早日遇到…

基于Springboot的计算机知识竞赛网站(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的计算机知识竞赛网站&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结…

通过一个例子演示golang调用C语言动态链接库中的函数

本例提供了cgo调用C函数的示例&#xff0c;也演示了如何将C函数打印内容保存到golang的变量中 目录和源码 目录结构 adminhpc-1:~/go/my_stdout$ tree . ├── include │ ├── mylibrary.c │ └── mylibrary.h ├── lib └── main.go2 directories, 3 files a…

产品老化试验目的、用途

什么是老化试验&#xff1f; 老化试验是通过模拟产品在使用过程中的老化情况&#xff0c;来评估产品在长期使用后的性能和可靠性。这种测试可以帮助制造商了解产品的寿命和耐久性&#xff0c;以及产品在不同环境条件下的表现。 模拟量采集/老化房采集软件 为什么需要进行老化试…

智慧公厕:让城市更智慧、更环保

在现代社会&#xff0c;智慧公厕作为城市管理的重要一环&#xff0c;是智慧城市的重要组成部分&#xff0c;其建设的价值十出突出&#xff0c;是公共厕所信息化升级改造的核心方案。如智慧公厕源头厂家广州中期科技有限公司&#xff0c;所自主研发的智慧公厕整体解决方案&#…

【HarmonyOS】鸿蒙开发之Video组件——第3.7章

Video组件内VideoOptions属性简介 src&#xff1a;设置视频地址。currentProgressRate&#xff1a;设置视频播放倍速&#xff0c;参数说明如下&#xff1a; number|string&#xff1a;只支持 0.75 &#xff0c; 1.0 &#xff0c; 1.25 &#xff0c; 1.75 &#xff0c; 2.0 。P…

安装 docker 可视化工具 portainer

portainer 官方网站 https://www.portainer.io/ 一、portainer 介绍 Portainer是一款开源的容器管理平台&#xff0c;它提供了一个直观易用的Web界面&#xff0c;帮助用户管理Docker容器集群、镜像、卷等资源。Portainer 支持多种 Docker 环境&#xff0c;包括本地Docker、Sw…

智能手表的革命性突破:TRIZ理论引领未来穿戴技术!

在科技日新月异的今天&#xff0c;智能手表已经从单纯的计时工具转变为集健康监测、信息通讯、娱乐休闲等多功能于一体的智能穿戴设备。而基于TRIZ理论的智能手表更是在这一变革中扮演着引领者的角色。TRIZ&#xff0c;即发明问题解决理论&#xff0c;是一套系统的创新方法学&a…

vue实现文件上传的功能

随着Web应用的发展&#xff0c;文件上传功能已经变得越来越常见。vue是一种流行的JavaScript框架&#xff0c;提供了便捷的方式来构建现代化的Web应用程序。在vue中&#xff0c;可以通过使用vue的Upload组件来实现文件上传功能。以下介绍如何使用vue来实现文件上传功能。 首先…

单例模式:饿汉式、懒汉式;线程安全的单例模式创建的6种方式

单例模式 单例模式Singleton是一种创建型模式&#xff0c;指某个采用Singleton单例模式&#xff0c;则这个类在同一个 JVM上&#xff0c;只能产生一个实例供外部访问&#xff0c;并且仅提供一个全局的访问方式。 懒汉式 懒汉式线程不安全 public class Singleton1 {privat…

迭代器模式(Iterator Pattern)

定义 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供了一种方法来顺序访问聚合对象中的各个元素&#xff0c;而不需要暴露该对象的内部表示。迭代器模式使得客户端代码能够独立于聚合对象的具体实现进行遍历操作。 在迭代器模式…

使用vue把一周的时间划分为可以选择多个阶段

提示:使用vue把一周的时间划分为可以选择多个阶段段(亲测有效) 一、直接复制以下代码 代码如下(示例): <template><div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li"><div class=&q…

连不上网的解决办法集--持续更新

连不上网的解决办法集–持续更新 1、有网卡&#xff0c;但网卡驱动失效 背景&#xff1a;有网络驱动但是依旧连不上网&#xff0c;只有inteV6有值&#xff0c;inte 没有值&#xff08;正常应该有个ipv4的信息&#xff09; 判断原因&#xff1a;可能是之前格式化磁盘驱动的时…

【iOS ARKit】协作Session

使用 ARWorldMap&#xff0c;能解决使用者再次进入同一物理空间时的AR 场景恢复问题&#xff0c;也能在多人之间共桌AR 体验&#xff0c;但这种共享并不是实时的&#xff0c;在载入ARWorldMap 后&#xff0c;设备新检测到的环境信息和使用者所做操作不会实时共享&#xff0c;即…

【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 小波分解算法 小波分解算法是一种数学方法&#xff0c;用于将信号分解为不同频率的小波成分。这种算法基于小波函数&#xff0c;可以用于信号处理、图像压缩和数据压缩等领域。小波分解算法的基本思想是…

nginx的nginx.conf的基本配置方法

#定义Nginx运行的用户和用户组 user www www; #nginx进程数&#xff0c;建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型&#xff0c;[ debug | info | notice | warn | error | crit ] error_log /var/log/nginx/error.log info; #进程文件 pi…