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.rhkb.cn/news/466381.html

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

相关文章

一文了解Android本地广播

在 Android 开发中&#xff0c;本地广播&#xff08;Local Broadcast&#xff09;是一种轻量级的通信机制&#xff0c;主要用于在同一应用进程内的不同组件之间传递消息&#xff0c;而无需通过系统的全局广播机制。这种方法既可以提高安全性&#xff08;因为广播仅在应用内传播…

Spark本地模式安装

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 《Spark SQL大数据分析快速上手》【摘要 书评 试读】- 京东图书 大数据与数据分析_夏天又到了的博客-CSDN博客 Hadoop完全分布式环境搭建步骤-CSDN博客,前置环境安装参看此博文 Spark本地模式安装 Spark本地模式的安…

SpringSecurity6+OAuth2.0 从入门到熟练使用

文章目录 简介1、快速入门1.1 准备工作我们先要搭建一个SpringBoot工程① 创建工程 添加依赖② 创建启动类③ 创建Controller1.2 引入SpringSecurity2、 认证2.1 登录校验流程2.2 原理分析2.2.1 SpringSecurity完整流程2.2.2 认证流程详解概念速查:2.3 解决问题2.3.1 思路分析2…

计算机网络——SDN

分布式控制路由 集中式控制路由

自动驾驶革命:从特斯拉到百度,谁将主宰未来交通?

内容概要 自动驾驶技术正在经历一个前所未有的革命性变化&#xff0c;各大企业纷纷抢占这一充满潜力的新市场。以特斯拉和百度为代表的行业巨头&#xff0c;正利用各自的优势在这一技术的赛道上展开激烈竞争。特斯拉凭借其在电动汽车和自动驾驶领域的前瞻性设计与不断革新的技…

Group By、Having用法总结(常见踩雷点总结—SQL)

Group By、Having用法总结 目录 Group By、Having用法总结一、 GROUP BY 用法二、 HAVING 用法三、 GROUP BY 和 HAVING 的常见踩雷点3.1 GROUP BY 选择的列必须出现在 SELECT 中&#xff08;&#x1f923;最重要的一点&#xff09;3.2 HAVING 与 WHERE 的区别3.3 GROUP BY 可以…

MySQL存储目录与配置文件(ubunto下)

mysql的配置文件&#xff1a; 在这个目录下&#xff0c;直接cd /etc/mysql/mysql.conf.d mysql的储存目录&#xff1a; /var/lib/mysql Ubuntu版本号&#xff1a;

深度学习经典模型之Network in Network

1 Network in Network 1.1 模型介绍 ​ Network In Network (NIN)是由 M i n L i n Min Lin MinLin等人提出&#xff0c;在CIFAR-10和CIFAR-100分类任务中达到当时的最好水平&#xff0c;因其网络结构是由三个多层感知机堆叠而被成为NIN [ 5 ] ^{[5]} [5]。NIN以一种全新的角…

Java版ERP管理系统源码解析:利用Spring Cloud Alibaba和Spring Boot实现微服务架构

ERP系统&#xff0c;亦称为企业资源计划系统&#xff0c;是一种融合了企业多元部门和复杂业务的综合管理信息系统。在全球经济蓬勃发展及企业竞争日趋激烈的背景下&#xff0c;ERP系统已逐步跃升为现代企业管理的核心工具。该系统通过优化资源配置及提升业务流程效率&#xff0…

Python 基础笔记之生成器generator

生成斐波拉契数列 def fib(length):a,b0,1n0while n<length:yield aa,bb,abn1return abc g2fib(10) try:print(next(g2)) 生成器方法&#xff1a; __next__():获取下一个元素 send(value):向每次生成器调用中传值 注意&#xff1a;第一次调用send(None) def gen():i0while…

vscode翻译插件

vscode翻译插件 需求 &#xff1a; 在编写代码的时候&#xff0c; 打印或者定义变量的时候总是想不起来英文名称&#xff0c; 所有就开发了一款中文转换为英文的插件。 功能 1、目前支持选中中文&#xff0c;右键选择打印或者变量进行转换。 2、目前支持选中中文&#xff0…

美格智能5G车规级通信模组:高精度定位守护极致安全

物联网时代&#xff0c;众多应用和设备都需要位置相关服务&#xff0c;尤其是对移动场景而言&#xff0c;定位的需求更加重要。随着自动驾驶、高阶辅助驾驶等智能车载技术的高速发展&#xff0c;在智能车载领域的定位需求除基础的位置信息之外&#xff0c;还对信息获取的速度、…

SpringMVC学习记录(三)之响应数据

SpringMVC学习记录&#xff08;三&#xff09;之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…

药品进销存表格制作 佳易王药店药品入库出库台账库存管理系统操作教程

一、概述 【软件试用版资源文件下载可以点文章最后官网卡片】 药品进销存表格制作 药店药品入库出库台账库存管理系统操作教程 ‌核心功能全面‌&#xff1a;涵盖药品进货、销售、库存管理&#xff0c;以及数据分析与报表生成。 ‌药品进货管理‌&#xff1a;记录供应商信息和…

网页版五子棋——用户模块(服务器开发)

前一篇文章&#xff1a;网页版五子棋—— WebSocket 协议-CSDN博客 目录 前言 一、编写数据库代码 1.数据库设计 2.配置 MyBatis 3.创建实体类 4.创建 UserMapper 二、前后端交互接口 1.登录接口 2.注册接口 3.获取用户信息 三、服务器开发 1.代码编写 2.测试后端…

A day a tweet(seventeen)——Visualize Convolution Neural Network!

a.形象化地CNNs visually explained! . .CNN(Convolution Neural Network) 卷积神经网络 a.不可思议的,难以置信的 v.使形象化CNN explainer is an incredible interactive tool to visualize the internal workings of a CNN. n.解释器;讲解员 …

将vscode的终端改为cygwin terminal

现在终端是默认的power shell&#xff0c;没有显示cygwin 接下来选择默认配置文件 找到cygwin的选项即可 然后提示可能不安全什么的&#xff0c;点是&#xff0c;就有了

大语言模型训练的全过程:预训练、微调、RLHF

一、 大语言模型的训练过程 预训练阶段&#xff1a;PT&#xff08;Pre training&#xff09;。使用公开数据经过预训练得到预训练模型&#xff0c;预训练模型具备语言的初步理解&#xff1b;训练周期比较长&#xff1b;微调阶段1&#xff1a;SFT&#xff08;指令微调/有监督微调…

《AI在企业战略中的关键地位:以微软和阿里为例》

内容概要 在当今商业环境中&#xff0c;人工智能&#xff08;AI&#xff09;的影响力如滔滔洪水&#xff0c;愈演愈烈。文章将揭示AI在企业战略中的崛起&#xff0c;尤其以微软和阿里巴巴为代表的企业&#xff0c;这两家科技巨头通过不同方式&#xff0c;将智能技术融入其核心…

aspose如何获取PPT放映页“切换”的“持续时间”值

文章目录 项目场景问题描述问题1&#xff1a;从官方文档和资料查阅发现并没有对切换的持续时间进行处理的方法问题2&#xff1a;aspose的依赖包中&#xff0c;所有的关键对象都进行了混淆处理 解决方案1、找到ppt切换的持续时间对应的混淆对象中的字段2、获取ppt切换的持续时间…