Flutter + OpenHarmony 进度环组件开发实战

Flutter OpenHarmony 进度环组件开发实战欢迎加入开源鸿蒙跨平台社区→ https://openharmonycrosplatform.csdn.net一、效果展示 运行效果预览在鸿蒙虚拟机上运行后的实际效果如下基础样式 实线进度环 - 圆滑的实线进度条渐变进度环 - 蓝紫渐变效果虚线进度环 - 20段虚线组成分段进度环 - 8段分段显示不同尺寸 60px - 小型进度环4px粗细100px - 标准进度环8px粗细140px - 大型进度环12px粗细自定义颜色 红色进度环绿色进度环蓝色进度环橙色进度环渐变效果 红橙渐变 - 暖色调蓝青渐变 - 冷色调紫粉渐变 - 梦幻色调多环进度 三层嵌套进度环蓝、绿、橙三色中心显示完成率自定义中心 爱心图标对勾图标沙漏图标交互式调节 滑块控制进度实时更新显示平滑动画过渡 四种样式对比图示实线样式 渐变样式 虚线样 式 分段样式 ╭───╮ ╭───╮ ╭─┬─╮ ╭─┬─╮ │ 75%│ │░65%│ │ │ │ │ │ │ ╰───╯ ╰───╯ ╰─┴─╯ ╰─┴─╯ 连续实线 渐变色彩 20段虚 线 8段分段 多环进度效果多环嵌套 ╭─────────╮ ╭┤ 85% ├╮ ╭││ 完成率 ││╮ │╰┤ ├╯│ │ ╰─────────╯ │ ╰─────────────╯ 蓝 绿 橙 三环二、组件概述进度环是展示任务完成度、数据加载进度、目标达成率等信息的重要组件。相比线性进度条圆形进度环更加美观、节省空间。在 OpenHarmony 环境下开发 Flutter 应用时进度环组件需要支持多种视觉样式、渐变效果、多环嵌套等功能。三、核心功能特性✅ 四种视觉样式 - 实线、渐变、虚线、分段✅ 渐变色彩支持 - SweepGradient实现渐变✅ 多环进度显示 - 嵌套多层进度环✅ 自定义中心内容 - 图标、文本可配置✅ 平滑动画过渡 - 进度变化时动画效果✅ 灵活尺寸配置 - 大小、粗细可调节四、技术实现架构4.1 进度环样式枚举enum ProgressRingStyle { solid, // 实线样式 gradient, // 渐变样式 dashed, // 虚线样式 segmented // 分段样式 }4.2 进度环动画枚举enum ProgressRingAnimation { smooth, // 平滑动画 bounce, // 弹跳动画 pulse, // 脉冲动画 rotate // 旋转动画 }4.3 组件属性定义class CustomProgressRing extends StatefulWidget { final double progress; // 进度值 0-1 final double size; // 尺寸 final double strokeWidth; // 线条粗细 final Color? backgroundColor; // 背景色 final Color? progressColor; // 进度色 final ListColor? gradientColors; // 渐变色 final ProgressRingStyle style; // 样式 final ProgressRingAnimation animation; // 动画 final bool showPercentage; // 显示百 分比 final TextStyle? percentageStyle; // 百分比样式 final Widget? centerWidget; // 中心组件 final Duration animationDuration; // 动画时长 final double startAngle; // 起始角度 }五、CustomProgressRing 核心实现5.1 动画控制器class _CustomProgressRingState extends StateCustomProgressRing with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); _controller AnimationController( vsync: this, duration: widget. animationDuration, ); _animation Tweendouble (begin: 0, end: widget.progress. clamp(0.0, 1.0)).animate( CurvedAnimation(parent: _controller, curve: Curves. easeInOutCubic), ); _controller.forward(); } override void didUpdateWidget (CustomProgressRing oldWidget) { super.didUpdateWidget (oldWidget); if (oldWidget.progress ! widget.progress) { _animation Tweendouble( begin: _animation.value, end: widget.progress.clamp (0.0, 1.0), ).animate( CurvedAnimation(parent: _controller, curve: Curves. easeInOutCubic), ); _controller.reset(); _controller.forward(); } } override void dispose() { _controller.dispose(); super.dispose(); } }动画原理 使用 AnimationController 控制动画Curves.easeInOutCubic 实现平滑过渡didUpdateWidget 监听进度变化进度变化时从当前值动画到新值5.2 布局构建override Widget build(BuildContext context) { final isDark Theme.of(context). brightness Brightness.dark; final bgColor widget. backgroundColor ?? (isDark ? Colors.grey[800]! : Colors.grey [200]!); final pColor widget. progressColor ?? Theme.of (context).colorScheme.primary; return AnimatedBuilder( animation: _animation, builder: (context, child) { return SizedBox( width: widget.size, height: widget.size, child: Stack( alignment: Alignment. center, children: [ CustomPaint( size: Size(widget. size, widget.size), painter: _ProgressRingPainter( progress: _animation.value, backgroundColor: bgColor, progressColor: pColor, gradientColors: widget. gradientColors, strokeWidth: widget. strokeWidth, style: widget.style, startAngle: widget. startAngle, ), ), if (widget. showPercentage || widget.centerWidget ! null) widget. centerWidget ?? _buildPercentageText (isDark), ], ), ); }, ); }布局原理 使用 Stack 叠加布局CustomPaint 绘制进度环中心显示百分比或自定义组件5.3 CustomPainter 绘制器class _ProgressRingPainter extends CustomPainter { final double progress; final Color backgroundColor; final Color progressColor; final ListColor? gradientColors; final double strokeWidth; final ProgressRingStyle style; final double startAngle; override void paint(Canvas canvas, Size size) { final center Offset(size. width / 2, size.height / 2); final radius (size.width - strokeWidth) / 2; _drawBackgroundRing(canvas, center, radius); _drawProgressRing(canvas, center, radius, size); } void _drawBackgroundRing(Canvas canvas, Offset center, double radius) { final paint Paint() ..color backgroundColor ..style PaintingStyle.stroke ..strokeWidth strokeWidth ..strokeCap StrokeCap.round; canvas.drawCircle(center, radius, paint); } }5.4 实线样式绘制void _drawSolidRing(Canvas canvas, Offset center, double radius, double startAngle, double sweepAngle) { final paint Paint() ..color progressColor ..style PaintingStyle.stroke ..strokeWidth strokeWidth ..strokeCap StrokeCap.round; canvas.drawArc( Rect.fromCircle(center: center, radius: radius), startAngle, sweepAngle, false, paint, ); }5.5 渐变样式绘制void _drawGradientRing(Canvas canvas, Offset center, double radius, double startAngle, double sweepAngle, Size size) { final colors gradientColors ?? [progressColor, progressColor. withOpacity(0.5)]; final rect Rect.fromCircle (center: center, radius: radius); final paint Paint() ..shader SweepGradient( startAngle: startAngle, endAngle: startAngle sweepAngle, colors: colors, tileMode: TileMode.clamp, ).createShader(rect) ..style PaintingStyle.stroke ..strokeWidth strokeWidth ..strokeCap StrokeCap.round; canvas.drawArc(rect, startAngle, sweepAngle, false, paint); }渐变原理 使用 SweepGradient 创建扫描渐变渐变角度跟随进度角度TileMode.clamp 防止溢出5.6 虚线样式绘制void _drawDashedRing(Canvas canvas, Offset center, double radius, double startAngle, double sweepAngle) { final paint Paint() ..color progressColor ..style PaintingStyle.stroke ..strokeWidth strokeWidth ..strokeCap StrokeCap.round; const dashCount 20; const dashSpace 3. 141592653589793 / 180 * 8; final dashAngle (sweepAngle - dashSpace * (dashCount - 1)) / dashCount; for (int i 0; i dashCount; i ) { final currentStartAngle startAngle i * (dashAngle dashSpace); canvas.drawArc( Rect.fromCircle(center: center, radius: radius), currentStartAngle, dashAngle, false, paint, ); } }虚线原理 固定20段虚线计算每段角度和间隔循环绘制每段弧线5.7 分段样式绘制void _drawSegmentedRing(Canvas canvas, Offset center, double radius, double startAngle, double sweepAngle) { final paint Paint() ..color progressColor ..style PaintingStyle.stroke ..strokeWidth strokeWidth ..strokeCap StrokeCap.round; const segmentCount 8; const segmentSpace 3. 141592653589793 / 180 * 6; final segmentAngle (sweepAngle - segmentSpace * (segmentCount - 1)) / segmentCount; for (int i 0; i segmentCount; i) { final currentStartAngle startAngle i * (segmentAngle segmentSpace); canvas.drawArc( Rect.fromCircle(center: center, radius: radius), currentStartAngle, segmentAngle, false, paint, ); } }六、MultiProgressRing 多环进度实现6.1 多环数据结构class RingData { final double progress; // 进 度值 final Color color; // 颜 色 final Color? backgroundColor; // 背景色 final double strokeWidth; // 线 条粗细 const RingData({ required this.progress, required this.color, this.backgroundColor, this.strokeWidth 8, }); }6.2 多环布局class MultiProgressRing extends StatelessWidget { final ListRingData rings; final double size; final Widget? centerWidget; override Widget build(BuildContext context) { return SizedBox( width: size, height: size, child: Stack( alignment: Alignment.center, children: [ ...rings.asMap().entries. map((entry) { final index entry.key; final ring entry. value; final ringSize size - (index * ring. strokeWidth * 2.5); return Positioned( child: CustomProgressRing( progress: ring. progress, size: ringSize, strokeWidth: ring. strokeWidth, progressColor: ring. color, backgroundColor: ring. backgroundColor, showPercentage: false, ), ); }), if (centerWidget ! null) centerWidget!, ], ), ); } }多环原理 使用 Stack 叠加多个进度环每个环的尺寸递减中心显示自定义组件七、使用示例集锦示例1基础进度环CustomProgressRing( progress: 0.75, )示例2渐变进度环CustomProgressRing( progress: 0.65, style: ProgressRingStyle.gradient, gradientColors: [Colors.blue, Colors.purple], )示例3虚线进度环CustomProgressRing( progress: 0.55, style: ProgressRingStyle.dashed, )示例4分段进度环CustomProgressRing( progress: 0.85, style: ProgressRingStyle. segmented, )示例5自定义尺寸CustomProgressRing( progress: 0.7, size: 140, strokeWidth: 12, )示例6自定义颜色CustomProgressRing( progress: 0.8, progressColor: Colors.red, backgroundColor: Colors.red. withOpacity(0.2), )示例7自定义中心CustomProgressRing( progress: 0.72, centerWidget: Icon(Icons. favorite, color: Colors.red, size: 32), )示例8多环进度MultiProgressRing( size: 160, rings: [ RingData(progress: 0.85, color: Colors.blue, strokeWidth: 10), RingData(progress: 0.65, color: Colors.green, strokeWidth: 10), RingData(progress: 0.45, color: Colors.orange, strokeWidth: 10), ], centerWidget: Text(85%), )八、性能优化策略8.1 绘制优化CustomPainter 高效的自定义绘制shouldRepaint 仅在必要时重绘局部刷新 避免全局重建8.2 动画优化AnimatedBuilder 局部重建Curves.easeInOutCubic 流畅的动画曲线单次动画 避免重复播放8.3 内存优化及时dispose 释放动画控制器轻量绘制 仅绘制必要元素九、常见问题解答Q1: 如何修改进度环大小设置 size 和 strokeWidth 参数CustomProgressRing( progress: 0.7, size: 140, strokeWidth: 12, )Q2: 如何隐藏百分比显示设置 showPercentage: false CustomProgressRing( progress: 0.7, showPercentage: false, )Q3: 如何自定义起始角度设置 startAngle 参数角度制CustomProgressRing( progress: 0.7, startAngle: 0, // 从右侧开始 )Q4: 如何修改动画时长设置 animationDuration 参数CustomProgressRing( progress: 0.7, animationDuration: const Duration (milliseconds: 2000), )Q5: 如何创建多环进度使用 MultiProgressRing 组件MultiProgressRing( rings: [ RingData(progress: 0.8, color: Colors.blue), RingData(progress: 0.6, color: Colors.green), ], )Q6: 如何使用渐变色设置 style: ProgressRingStyle.gradient 和 gradientColors CustomProgressRing( progress: 0.7, style: ProgressRingStyle.gradient, gradientColors: [Colors.red, Colors.orange], )运行效果截图十、总结本文详细介绍了如何在 Flutter OpenHarmony 环境中开发一个功能完善的进度环组件。该组件具备以下技术亮点 丰富的样式选择 - 四种风格适配不同设计 渐变色彩支持 - SweepGradient实现流畅渐变⚡ 多环嵌套显示 - 支持多层进度环叠加 高度可定制 - 尺寸、颜色、动画全面可控实际应用场景 任务完成度数据加载进度目标达成率技能熟练度健康数据展示