Flutter自界说矩形进度条实现详解

在Flutter应用开发中，进度条是一个常见的UI组件，用于展示任务的完成进度。本文将具体先容如何实现一个支持动画效果的自界说矩形进度条。
功能特点

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

实现原理

该进度条的实现紧张基于Flutter的CustomPaint和CustomPainter，通过绘制路径来实现圆角矩形的进度效果。
1. 基础组件结构

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

1. class RectangleProgressBar extends StatefulWidget {
2.   final double progress;
3.   final Size size;
4.   final double borderRadius;
5.   final Duration duration;
7.   const RectangleProgressBar({
8.     super.key,
9.     required this.progress,
10.     this.size = const Size(200, 200),
11.     this.borderRadius = 20,
12.     this.duration = const Duration(milliseconds: 1000),
13.   });
14.   
15.   // ...
16. }

复制代码

2. 动画控制

在State类中，我们利用AnimationController来控制进度条的动画效果：

1. class _RectangleProgressBarState extends State<RectangleProgressBar>
2.     with SingleTickerProviderStateMixin {
3.   // ... 初始化代码 ...
5.   @override
6.   void didUpdateWidget(RectangleProgressBar oldWidget) {
7.     if (oldWidget.progress != widget.progress) {
8.       _previousProgress = _animation.value;
9.       _animation = Tween<double>(
10.         begin: _previousProgress,
11.         end: widget.progress,
12.       ).animate(CurvedAnimation(
13.         parent: _controller,
14.         curve: Curves.easeInOutCubic,
15.       ));
16.       _controller.reset();
17.       _controller.forward();
18.     }
19.   }
20. }

复制代码

3. 自界说绘制器

焦点的绘制逻辑在RectangleProgressPainter类中实现：

1. class RectangleProgressPainter extends CustomPainter {
2.   // ... 属性定义 ...
4.   @override
5.   void paint(Canvas canvas, Size size) {
6.     final rect = Rect.fromLTWH(0, 0, size.width, size.height);
7.     final path = _createRoundedRectanglePath(size);
8.     _drawBackground(canvas, path);
9.     _drawProgress(canvas, path, rect);
10.   }
11. }

复制代码

4. 路径创建

进度条的路径创建是一个紧张部门，需要准确控制每个圆角的绘制：

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

复制代码

5. 进度绘制

进度条的绘制利用了路径度量和渐变色：

1. void _drawProgress(Canvas canvas, Path path, Rect rect) {
2.   final pathMetric = path.computeMetrics().first;
3.   final progressLength = pathMetric.length * value;
4.   final progressPath = Path()
5.     ..addPath(
6.       pathMetric.extractPath(0, progressLength),
7.       Offset.zero,
8.     );
9.    
10.   final progressPaint = Paint()
11.     ..style = PaintingStyle.stroke
12.     ..strokeWidth = strokeWidth
13.     ..strokeCap = StrokeCap.round
14.     ..strokeJoin = StrokeJoin.miter
15.     ..isAntiAlias = true
16.     ..shader = LinearGradient(
17.       begin: Alignment.centerRight,
18.       end: Alignment.centerLeft,
19.       colors: valueColors,
20.     ).createShader(rect);
22.   canvas.drawPath(progressPath, progressPaint);
23. }

复制代码

利用方法

利用这个自界说进度条非常简朴：

1. RectangleProgressBar(
2.   progress: 0.7, // 70%的进度
3.   size: Size(300, 300),
4.   borderRadius: 25,
5.   duration: Duration(milliseconds: 1500),
6. )

复制代码

性能优化

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

1. @override
2. bool shouldRepaint(RectangleProgressPainter oldDelegate) {
3.   return oldDelegate.value != value ||
4.       !listEquals(valueColors, oldDelegate.valueColors) ||
5.       bgStrokeColor != oldDelegate.bgStrokeColor ||
6.       strokeWidth != oldDelegate.strokeWidth ||
7.       progressStrokeWidth != oldDelegate.progressStrokeWidth ||
8.       borderRadius != oldDelegate.borderRadius;
9. }

复制代码

总结

这个自界说矩形进度条实现了以下特点：

• 利用CustomPainter实现自界说绘制
  
• 支持平滑的动画效果
  
• 可自界说外观（颜色、巨细、圆角等）
  
• 利用路径度量实现准确的进度体现
  
• 支持渐变色效果
  

通过这个实现，我们不但创建了一个美观的UI组件，还学习了Flutter中自界说绘制和动画的相干知识。这个组件可以在各种场景下利用，比如文件上传、下载进度体现等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。