Flutter自定义矩形进度条实现详解

在Flutter应用开发中,进度条是一个常见的UI组件,用于展示任务的完成进度。本文将详细介绍如何实现一个支持动画效果的自定义矩形进度条。

功能特点

  • 支持圆角矩形外观
  • 平滑的动画过渡效果
  • 可自定义渐变色
  • 可配置边框宽度和颜色
  • 支持进度更新动画

实现原理

该进度条的实现主要基于Flutter的CustomPaintCustomPainter,通过绘制路径来实现圆角矩形的进度效果。

1. 基础组件结构

首先,我们创建一个StatefulWidget来管理进度条的状态:

class RectangleProgressBar extends StatefulWidget {final double progress;final Size size;final double borderRadius;final Duration duration;const RectangleProgressBar({super.key,required this.progress,this.size = const Size(200, 200),this.borderRadius = 20,this.duration = const Duration(milliseconds: 1000),});// ...
}

2. 动画控制

State类中,我们使用AnimationController来控制进度条的动画效果:

class _RectangleProgressBarState extends State<RectangleProgressBar>with SingleTickerProviderStateMixin {// ... 初始化代码 ...@overridevoid didUpdateWidget(RectangleProgressBar oldWidget) {if (oldWidget.progress != widget.progress) {_previousProgress = _animation.value;_animation = Tween<double>(begin: _previousProgress,end: widget.progress,).animate(CurvedAnimation(parent: _controller,curve: Curves.easeInOutCubic,));_controller.reset();_controller.forward();}}
}

3. 自定义绘制器

核心的绘制逻辑在RectangleProgressPainter类中实现:

class RectangleProgressPainter extends CustomPainter {// ... 属性定义 ...@overridevoid paint(Canvas canvas, Size size) {final rect = Rect.fromLTWH(0, 0, size.width, size.height);final path = _createRoundedRectanglePath(size);_drawBackground(canvas, path);_drawProgress(canvas, path, rect);}
}

4. 路径创建

进度条的路径创建是一个重要部分,需要精确控制每个圆角的绘制:

Path _createRoundedRectanglePath(Size size) {final path = Path();// 从顶部中点开始绘制path.moveTo(size.width / 2, 0);// 绘制右上角path.lineTo(size.width - borderRadius, 0);path.arcToPoint(Offset(size.width, borderRadius),radius: Radius.circular(borderRadius),);// ... 继续绘制其他边和圆角 ...return path;
}

5. 进度绘制

进度条的绘制使用了路径度量和渐变色:

void _drawProgress(Canvas canvas, Path path, Rect rect) {final pathMetric = path.computeMetrics().first;final progressLength = pathMetric.length * value;final progressPath = Path()..addPath(pathMetric.extractPath(0, progressLength),Offset.zero,);final progressPaint = Paint()..style = PaintingStyle.stroke..strokeWidth = strokeWidth..strokeCap = StrokeCap.round..strokeJoin = StrokeJoin.miter..isAntiAlias = true..shader = LinearGradient(begin: Alignment.centerRight,end: Alignment.centerLeft,colors: valueColors,).createShader(rect);canvas.drawPath(progressPath, progressPaint);
}

使用方法

使用这个自定义进度条非常简单:

RectangleProgressBar(progress: 0.7, // 70%的进度size: Size(300, 300),borderRadius: 25,duration: Duration(milliseconds: 1500),
)

性能优化

为了确保性能,我们实现了shouldRepaint方法来控制重绘逻辑:

@override
bool shouldRepaint(RectangleProgressPainter oldDelegate) {return oldDelegate.value != value ||!listEquals(valueColors, oldDelegate.valueColors) ||bgStrokeColor != oldDelegate.bgStrokeColor ||strokeWidth != oldDelegate.strokeWidth ||progressStrokeWidth != oldDelegate.progressStrokeWidth ||borderRadius != oldDelegate.borderRadius;
}

总结

这个自定义矩形进度条实现了以下特点:

  1. 使用CustomPainter实现自定义绘制
  2. 支持平滑的动画效果
  3. 可自定义外观(颜色、大小、圆角等)
  4. 使用路径度量实现精确的进度显示
  5. 支持渐变色效果

通过这个实现,我们不仅创建了一个美观的UI组件,还学习了Flutter中自定义绘制和动画的相关知识。这个组件可以在各种场景下使用,比如文件上传、下载进度显示等。

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

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

相关文章

uniapp配置h5路由模式为history时404

为了不让URL中出现#&#xff0c;让uniapp项目配置h5路由模式为hisory 然而本地好好的&#xff0c;放到服务器上却404了。 解决方法是给nginx配置一个伪静态&#xff1a; location /xxx-html/ {alias /home/nginx_web/xxx_new_html/;try_files $uri $uri/ /xxx-html/index.ht…

python画图|灵活的subplot_mosaic()函数-初逢

【1】引言 前述学习进程中&#xff0c;对hist()函数画直方图已经有一定的探索。然而学无止境&#xff0c;在继续学习的进程中&#xff0c;我发现了一个显得函数subplot_mosaic()&#xff0c;它几乎支持我们随心所欲地排布多个子图。 经过自我探索&#xff0c;我有一些收获&am…

单体架构的 IM 系统设计

先直接抛出业务背景&#xff01; 有一款游戏&#xff0c;日活跃量&#xff08;DAU&#xff09;在两千左右&#xff0c;虽然 DAU 不高&#xff0c;但这两千用户的忠诚度非常高&#xff0c;而且会持续为游戏充值&#xff1b;为了进一步提高用户体验&#xff0c;继续增强用户的忠…

vue实现天地图电子围栏

一、文档 vue3 javascript WGS84、GCj02相互转换 天地图官方文档 注册登录然后申请应用key&#xff0c;通过CDN引入 <script src"http://api.tianditu.gov.cn/api?v4.0&tk您的密钥" type"text/javascript"></script>二、分析 所谓电子围…

【C++前缀和 单调栈】1124. 表现良好的最长时间段|1908

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 C单调栈 LeetCode 1124. 表现良好的最长时间段 给你一份工作时间表 hours&#xff0c;上面记录着某一位员工每天的工作小时数。 我们认为当员工一天中的工作小时数大…

qt5将程序打包并使用

一、封装程序 (1)、点击创建项目->库->clibrary &#xff08;2&#xff09;、填写自己想要封装成库的名称&#xff0c;这里我填写的名称为mydll1 &#xff08;3&#xff09;、如果没有特殊的要求&#xff0c;则一路下一步&#xff0c;最终会出现如下文件列表。 (4)、删…

PICO+Unity MR空间锚点

官方链接&#xff1a;空间锚点 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

网页中的某个元素高度突然无法设置

做网页时本来一个div的高度好好的&#xff0c;结果代码打着打着突然发现有个div的高度变的很小&#xff0c;把我很多在这个div里的元素给搞的看不见了。 找了好久的原因最后发现是这个div的结束标签</div>不小心被我删了,之后把这个</div>给补上就好了。

17、论文阅读:VMamba:视觉状态空间模型

前言 设计计算效率高的网络架构在计算机视觉领域仍然是一个持续的需求。在本文中&#xff0c;我们将一种状态空间语言模型 Mamba 移植到 VMamba 中&#xff0c;构建出一个具有线性时间复杂度的视觉主干网络。VMamba 的核心是一组视觉状态空间 (VSS) 块&#xff0c;搭配 2D 选择…

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…

【Leecode】Leecode刷题之路第44天之通配符匹配

题目出处 44-通配符匹配-题目出处 题目描述 个人解法 思路&#xff1a; todo代码示例&#xff1a;&#xff08;Java&#xff09; todo复杂度分析 todo官方解法 44-通配符匹配-官方解法 前言 本题与10. 正则表达式匹配非常类似&#xff0c;但相比较而言&#xff0c;本题稍…

Redis - 主从复制

在分布式系统中为了解决单点问题&#xff0c;通常会把数据复制多个副本部署到其他服务器&#xff0c;满⾜故障恢 复和负载均衡等需求。Redis也是如此&#xff0c;它为我们提供了复制的功能&#xff0c;实现了相同数据的多个Redis副 本。复制功能是⾼可⽤Redis的基础&#xff0c…

推荐一款高级的安装程序打包工具:Advanced Installer Architect

AdvanCEd Installer Architect是一款高级的安装程序打包工具&#xff0c;我们有时候可能用nsis用的多&#xff0c;Advanced Installer Architect也是一款打包工具&#xff0c;有兴趣的朋友也可以试试。有了Advanced Installer Architect你就可以创建MSI打包。 主要功能 *先进的…

【信号处理】基于联合图像表示的深度学习卷积神经网络

Combined Signal Representations for Modulation Classification Using Deep Learning: Ambiguity Function, Constellation Diagram, and Eye Diagram 信号表示 Ambiguity Function(AF) 模糊函数描述了信号的两个维度(dimensions):延迟(delay)和多普勒(Doppler)。 …

CocosCreator 构建透明背景应用(最新版!!!)

文章目录 透明原理补充设置截图以及代码step1: electron-js mian.jsstep2:ENABLE_TRANSPARENT_CANVASstep3:SOLID_COLOR Transparentstep:4 Build Web phonestep5:package electron-js & change body background-color 效果图补充 透明原理 使用Cocos creator 做桌面应用开…

大数据学习11之Hive优化篇

1.Hive压缩 1.1概述 当前的大数据环境下&#xff0c;机器性能好&#xff0c;节点更多&#xff0c;但并不代表我们无条件直接对数据进行处理&#xff0c;在某些情况下&#xff0c;我们依旧需要对数据进行压缩处理&#xff0c;压缩处理能有效减少存储系统的字节读取数&#xff0…

C++builder中的人工智能(13):SELU激活函数在C++应用中的工作原理

SELU&#xff08;Scaled Exponential Linear Unit&#xff09;激活函数是一种在人工神经网络&#xff08;ANN&#xff09;中使用的高级激活函数。它是由Gnter Klambauer, Thomas Unterthiner, Andreas Mayr在2017年提出的&#xff0c;旨在创建自归一化的神经网络&#xff08;Se…

运用Agent搭建“狼人杀”游戏服务器端!

背景 从23年开年以来&#xff0c;大模型引爆了各行各业。去年比较出圈的是各类文生图的应用&#xff0c;比如Stable Diffusion。网上可以看到各类解释其背后的原理和应用的文章。另外一条平行线&#xff0c;则是文生文的场景。受限于当时LLM&#xff08;大语言模型&#xff09…

性能调优专题(6)之MVCC多版本并发控制

一、概述 Mysql在可重复读隔离级别下如果保证事务较高的隔离性,在上一个篇章有详细介绍,同样的sql语句在一个事务多次执行查询结果相同,就算其他事务对数据进行修改也不会影响到当前事务sql语句的查询结果。 这个隔离性就是靠MVCC(Multi-Version Concurrency Control)机制来…

ArcGIS/QGIS按掩膜提取或栅格裁剪后栅格数据的值为什么变了?

问题描述&#xff1a; 现有一栅格数据&#xff0c;使用ArcGIS或者QGIS按照矢量边界进行按掩膜提取或者栅格裁剪以后&#xff0c;其值的范围发生了变化&#xff0c;如下&#xff1a; 可以看到&#xff0c;不论是按掩膜提取还是进行栅格裁剪后&#xff0c;其值的范围均与原来栅…