flutter如何实现semi-progress-circle半圆进度条

Flutter中如何实现半圆形的进度条效果？我尝试过使用CircularProgressIndicator，但它只能显示完整的圆形进度。现在需要实现一个类似仪表盘的半圆进度条，可以自定义颜色、宽度和起始角度。请问有没有现成的第三方库可以实现这个效果？或者需要自己通过CustomPainter来绘制？希望能提供具体的代码示例或实现思路。

2 回复

使用Flutter实现半圆进度条，可通过CustomPaint自定义绘制。步骤如下：

  1. 创建CustomPaint组件，传入CustomPainter。
  2. 在paint方法中使用Canvas绘制圆弧（drawArc）。
  3. 根据进度值动态调整圆弧的结束角度。
  4. 可添加渐变、阴影等效果增强视觉效果。

更多关于flutter如何实现semi-progress-circle半圆进度条的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现半圆进度条，可以使用 CustomPaint 和 CustomPainter 自定义绘制。以下是实现步骤和代码示例：

1. 创建自定义绘制器

import 'package:flutter/material.dart';

class SemiCircleProgressPainter extends CustomPainter {
  final double progress; // 进度值 (0.0 ~ 1.0)
  final Color backgroundColor;
  final Color progressColor;
  final double strokeWidth;

  SemiCircleProgressPainter({
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.strokeWidth = 10.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round;

    // 绘制背景半圆
    final rect = Rect.fromCircle(
      center: Offset(size.width / 2, size.height),
      radius: size.width / 2,
    );
    canvas.drawArc(rect, pi, pi, false, paint);

    // 绘制进度半圆
    paint.color = progressColor;
    canvas.drawArc(rect, pi, pi * progress, false, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

2. 使用 CustomPaint 组件

CustomPaint(
  size: Size(200, 100), // 宽度为高度的2倍
  painter: SemiCircleProgressPainter(
    progress: 0.7, // 70% 进度
    backgroundColor: Colors.grey[300]!,
    progressColor: Colors.blue,
    strokeWidth: 15,
  ),
)

3. 添加动画（可选）

如需动画效果，可配合 AnimationController：

class AnimatedSemiCircleProgress extends StatefulWidget {
  @override
  _AnimatedSemiCircleProgressState createState() => _AnimatedSemiCircleProgressState();
}

class _AnimatedSemiCircleProgressState extends State<AnimatedSemiCircleProgress>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          size: Size(200, 100),
          painter: SemiCircleProgressPainter(progress: _controller.value),
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

主要参数说明：

  • progress：进度值（0.0~1.0）
  • strokeWidth：线条粗细
  • strokeCap：线条端点样式（圆角）
  • 通过调整 Size 的宽高比控制半圆形状

这种方法灵活可控，可以轻松自定义颜色、粗细和动画效果。

回到顶部