Flutter进度指示器
封面图
•
2025-10-26
•
Flutter
7
0
0
0
在 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 需求 | 如果你有具体的使用场景(如加载数据、上传文件、动画效果等),我可以提供更详细的实现方式!
上一篇:
Flutter输入框及表单
下一篇:
Flutter布局类组件简介
标题录入,一次不能超过6条
返回顶部
留言
留言
评论