制作弧线进度条

Question

老师好！ 我想实现一个图中显示的弧形进度条，用CustomPainter尝试了很多次没有成功，请老师指点指点。

Answer 1

CrazyCodeBoy 2025-01-31 20:57:50

要在 Flutter 中使用 CustomPainter 实现弧形进度条，可以参考以下代码：

步骤

1. 使用 CustomPainter 绘制弧形

2. 支持进度更新

3. 提供自定义颜色和样式

---

完整代码

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black87,
        body: Center(
          child: ArcProgressIndicator(progress: 0.75), // 进度 75%
        ),
      ),
    );
  }
}

class ArcProgressIndicator extends StatelessWidget {
  final double progress; // 进度，范围 0.0 ~ 1.0

  const ArcProgressIndicator({super.key, required this.progress});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(200, 100), // 控制绘制区域大小
      painter: ArcProgressPainter(progress),
    );
  }
}

class ArcProgressPainter extends CustomPainter {
  final double progress;

  ArcProgressPainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    final double strokeWidth = 12.0;
    final Paint backgroundPaint = Paint()
      ..color = Colors.brown[800]!
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round;

    final Paint progressPaint = Paint()
      ..color = Colors.orangeAccent
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round;

    final double startAngle = pi; // 180度起始
    final double sweepAngle = pi * progress; // 根据进度计算角度

    final Rect rect = Rect.fromLTWH(0, 0, size.width, size.height * 2);

    // 绘制背景弧
    canvas.drawArc(rect, startAngle, pi, false, backgroundPaint);

    // 绘制进度弧
    canvas.drawArc(rect, startAngle, sweepAngle, false, progressPaint);
  }

  @override
  bool shouldRepaint(ArcProgressPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

---

实现解析

1. 绘制背景弧线

• 使用 canvas.drawArc 绘制一条完整的半圆弧。

• 颜色设为棕色 (Colors.brown[800])，表示未完成的部分。

绘制进度弧

• progressPaint 颜色为橙色 (Colors.orangeAccent)，代表已完成的进度。

• sweepAngle = pi * progress，控制进度长度。

使用 CustomPainter 控制 UI

• 通过 CustomPaint 组件调用 ArcProgressPainter 进行绘制。

• 通过 progress 变量动态控制进度。

---

如何使用

• 修改 progress: 0.75 可以更改进度，比如 0.5（50%）。

• Size(200, 100) 控制绘制区域的大小，可以适配不同 UI 需求。

---

效果

✅ 支持动态进度✅ 圆角进度条✅ 适用于 Flutter 任何 UI 组件

这样，你就可以成功实现一个 弧形进度条 了！🎯