Flutter控件之CircularProgressIndicator

CircularProgressIndicator的作用

Flutter中的CircularProgressIndicator是一个圆形进度指示器，用于表示正在进行的任务的进度。它通常用于长时间运行的任务，例如文件下载、网络请求等。CircularProgressIndicator可以在圆周上旋转，以表示正在进行的任务的进度，同时可以根据需要设置颜色、尺寸和线宽等属性。

总的来说CircularProgressIndicator是Flutter中的一个内置小部件，用于在用户等待某个操作完成时显示一个圆形进度指示器。通常，它用于表示应用程序正在执行后台任务，以向用户传达操作正在进行中，不会冻结应用程序。

CircularProgressIndicator的主要特点和用法

导入flutter/material.dart包

要使用CircularProgressIndicator，首先需要导入flutter/material.dart包。

import 'package:flutter/material.dart';

创建CircularProgressIndicator小部件

你可以在Flutter的UI层次结构中创建一个CircularProgressIndicator小部件，通常放置在需要显示进度的位置。

CircularProgressIndicator();

你可以通过一些属性来自定义CircularProgressIndicator的外观，例如value、strokeWidth等。

value属性：CircularProgressIndicator的value属性是一个双精度浮点数，范围在0.0（没有进度）到1.0（完成进度）之间。你可以使用它来控制进度的显示。例如，如果你知道操作的完成百分比，可以将value设置为相应的值。

CircularProgressIndicator(
  value: 0.5, // 显示50%的进度
);

strokeWidth属性：strokeWidth属性用于定义圆形进度指示器的线条宽度。默认值是4.0，你可以根据需要进行调整。

CircularProgressIndicator(
  strokeWidth: 6.0, // 设置线条宽度为6.0
);

颜色和背景

你可以使用color属性来指定进度指示器的颜色，使用backgroundColor属性来指定背景颜色。

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), // 设置颜色为蓝色
  backgroundColor: Colors.grey, // 设置背景颜色为灰色
);

不确定性进度

如果你不知道进度的确切值，可以使用不确定性进度，其中进度指示器会无限旋转，表示操作正在进行中，但没有具体的百分比。

CircularProgressIndicator(); // 默认情况下，进度为不确定

在布局中使用

将CircularProgressIndicator放置在你的Flutter布局中的位置，通常在Center小部件中以确保居中显示。

Center(
  child: CircularProgressIndicator(),
)

CircularProgressIndicator是Flutter中用于表示加载、进度等待等情况的一种常见方式。通过自定义其外观和使用value属性来控制进度，你可以根据你的应用程序需求来集成和使用它。

CircularProgressIndicator的类型

CircularProgressIndicator有两种类型：确定进度和不确定进度。确定进度指示器用于表示已知的进度，例如文件下载的进度，而不确定进度指示器用于表示未知的进度，例如正在加载数据。根据不同的场景，我们可以选择不同类型的进度指示器。

CircularProgressIndicator常用属性

以下是CircularProgressIndicator的一些常用属性：

• value: 进度值，0.0表示没有进度，1.0表示完成。
• backgroundColor: 进度条的背景颜色。
• valueColor: 进度条的颜色，可以使用AlwaysStoppedAnimation<Color>或ColorTween来指定动画效果。
• strokeWidth: 进度条的线宽。
• semanticsLabel: 用于屏幕阅读器的标签。

以下是一个简单的示例，演示如何在Flutter中使用CircularProgressIndicator：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

在上面的代码中，我们在Center小部件中添加了一个CircularProgressIndicator，并将其作为页面的主体，这将在屏幕中央显示一个圆形进度指示器。
效果如图：

除了默认的CircularProgressIndicator之外，Flutter还提供了其他类型的进度指示器，例如线性进度指示器和扇形进度指示器，可以根据需要选择不同的类型来满足不同的需求。

其他用途

如下图使用CircularProgressIndicator实现的倒计时效果

进度控制

如果你想要在后台任务执行时动态更新进度，可以使用value属性。你可以在任务执行的过程中不断更新value属性的值来反映进度的变化。这通常需要与setState()或Stream等机制结合使用。

double _progress = 0.0;

CircularProgressIndicator(
  value: _progress,
);


// 在后台任务中更新进度
void updateProgress() {
  setState(() {
    _progress = calculateProgress(); // 计算进度的函数
  });
}

使用AsyncSnapshot与FutureBuilder

如果你的进度依赖于Future的执行状态，你可以使用FutureBuilder来方便地管理和显示进度。

FutureBuilder(
  future: myAsyncTask(), // 你的异步任务
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // 显示进度指示器
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      // 处理错误
      return Text('Error: ${snapshot.error}');
    } else {
      // 显示完成状态
      return Text('Task completed successfully');
    }
  },
);

自定义样式：如果你想要更多地控制进度指示器的外观，你可以使用LinearProgressIndicator和自定义Widget的组合，或者使用CustomPaint来自定义绘制。这允许你创建完全自定义的进度指示器，以满足特定的设计要求。

语义化

要确保应用程序具有良好的可访问性，你可以为CircularProgressIndicator添加语义标签，以描述正在进行的操作。

Semantics(
  label: 'Loading',
  child: CircularProgressIndicator(),
)

总之，CircularProgressIndicator是Flutter中用于显示加载和进度等待状态的常见小部件。它非常灵活，可以根据应用程序的需求进行自定义。无论是用于简单的加载指示还是显示复杂的进度，你都可以通过适当设置属性和状态来满足你的需求。