Flutter进度指示器

封面图 • 2025-10-26 • Flutter

在 Flutter 中，**进度指示器（Progress Indicator）** 是用于表示任务正在进行中的 UI 组件。它们通常用于加载数据、等待网络请求、文件下载等场景中，以提升用户体验。

Flutter 提供了多种进度指示器组件，以下是常用的几种：

---

## 1. **LinearProgressIndicator**
- 显示为一条水平的进度条。
- 适用于显示**线性进度**（如下载、加载等）。
- 默认是不带动画的，但可以通过 `value` 属性控制进度。

### 示例代码：
```dart
LinearProgressIndicator(
  value: 0.5, // 进度值 (0.0 到 1.0)
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)
```

---

## 2. **CircularProgressIndicator**
- 显示为一个圆形的旋转进度条。
- 常用于表示**异步操作正在执行**，比如加载数据或发送请求。
- 默认会一直旋转，也可以通过 `value` 控制进度。

### 示例代码：
```dart
CircularProgressIndicator(
  strokeWidth: 4.0,
  color: Colors.blue,
)
```

---

## 3. **Custom Progress Indicators**
你可以通过自定义样式和动画来创建自己的进度指示器，例如使用 `AnimatedBuilder` 或 `CustomPainter`。

### 示例：自定义圆形进度条
```dart
class CustomCircularProgress extends StatefulWidget {
  @override
  _CustomCircularProgressState createState() => _CustomCircularProgressState();
}

class _CustomCircularProgressState extends State<CustomCircularProgress>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

@override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.repeat();
  }

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

@override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(100, 100),
      painter: CircularProgressPainter(animation: _animation),
    );
  }
}

class CircularProgressPainter extends CustomPainter {
  final Animation<double> animation;

CircularProgressPainter({required this.animation});

@override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10.0
      ..shader = null;

double radius = size.width / 2;
    double centerX = size.width / 2;
    double centerY = size.height / 2;

// 绘制背景圆
    canvas.drawCircle(Offset(centerX, centerY), radius - 5, paint..color = Colors.grey);

// 绘制进度圆
    double arcAngle = animation.value * 2 * math.pi;
    canvas.drawArc(
      Rect.fromLTWH(0, 0, size.width, size.height),
      -math.pi / 2,
      arcAngle,
      false,
      paint,
    );
  }

@override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
```

---

## 4. **结合 Future 使用进度指示器**

通常你会在 `Future` 操作时使用进度指示器，比如网络请求。

### 示例：
```dart
Future<void> loadData() async {
  setState(() {
    showLoader = true;
  });

await Future.delayed(Duration(seconds: 2)); // 模拟网络请求

setState(() {
    showLoader = false;
  });
}

// 在 Widget 中：
if (showLoader) {
  return Center(child: CircularProgressIndicator());
} else {
  return Text("Data Loaded");
}
```

---

## 5. **Material Design 的 Progress Indicators**

Flutter 提供了 Material 风格的进度指示器，包括：

- `LinearProgressIndicator`
- `CircularProgressIndicator`

这些组件默认已经适配了 Material Design 的风格。

---

## 总结

| 组件 | 类型 | 用途 |
|------|------|------|
| `LinearProgressIndicator` | 线性进度条 | 显示线性进度（如下载、加载） |
| `CircularProgressIndicator` | 圆形进度条 | 表示异步操作进行中 |
| 自定义进度条 | 自定义 | 用于复杂 UI 需求 |

如果你有具体的使用场景（如加载数据、上传文件、动画效果等），我可以提供更详细的实现方式！