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,一经查实,立即删除!

相关文章

C#中的Math类

在 C# 中&#xff0c;Math 类提供了许多数学运算的静态方法&#xff0c;涵盖了各种常见的数学函数和操作。以下是 Math 类中的常用方法及其用法&#xff08;持续更新中…&#xff09; 方法说明示例Abs()返回指定数值的绝对值int absValue Math.Abs(-10); 结果为 10Acos()返回…

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>二、分析 所谓电子围…

基于SSM(Spring + Spring MVC + MyBatis)框架的汽车租赁共享平台系统

基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的汽车租赁共享平台系统是一个复杂的Web应用程序&#xff0c;用于管理和调度汽车租赁服务。下面我将提供一个详细的案例程序概述&#xff0c;包括主要的功能模块和技术栈介绍。 项目概述 功能需求 用户管理&…

Python函数专题:默认参数与关键字参数

在Python编程中,函数是一个非常重要的概念。它们不仅用于组织代码,还能够提高代码的重用性和可读性。在本文中,我们将深入探讨Python的默认参数和关键字参数这两个特性。这些特性可以让函数的调用更加灵活和强大。 一、什么是默认参数? 默认参数是指在定义函数时,为某些…

前端将后端返回的文件下载到本地

vue 将后端返回的文件地址下载到本地 在 template 拿到后端返回的文件路径 <el-button link type"success" icon"Download" click"handleDownload(file)"> 附件下载 </el-button>在 script 里面写方法 function handleDownload(v…

【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;勾选…

远程终端vim里使用系统剪切板

1、本地通过终端远程linux server&#xff0c;由于不是桌面环境/GUI&#xff0c;终端vim里似乎没办法直接使用系统剪切板&#xff0c;即便已经是clipboard。 $ vim --version | grep clipboard clipboard keymap printer vertsplit eval …

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

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

go中的类型断言详解

在Go语言中&#xff0c;类型断言&#xff08;Type Assertion&#xff09;是一种将接口类型的变量转换为具体类型的机制。类型断言允许我们从接口类型的变量中提取出具体的值&#xff0c;以便访问具体类型的方法或属性。类型断言的语法如下&#xff1a; value, ok : interfaceV…

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

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

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

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

XSS漏洞--常用payload及绕过

前置准备 首先准备一个自己的服务器。本地服务器&#xff0c;也就是127.0.0.1不行。在服务器的公开的、可访问的目录下准备一个.php文件。我这里命名为flag.php。flag.php的源代码&#xff1a; //flag.php <?php $cookie $_GET[cookie]; $log fopen("cookie.txt&q…

【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打包。 主要功能 *先进的…