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

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

功能特点

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

实现原理

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

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中自定义绘制和动画的相关知识。这个组件可以在各种场景下使用，比如文件上传、下载进度显示等。