Flutter基础控件篇之进度条控件的使用指南

2023-11-23 19:19:58

在Flutter中，Material组件库为我们提供了两种常用的进度条控件：LinearProgressIndicator和CircularProgressIndicator。前者是一个线性的进度条，后者是一个圆形的进度条。它们都可以同时用于精确的进度指示和模糊的进度指示。

1. 线性进度条LinearProgressIndicator

LinearProgressIndicator是一个水平的进度条，它通常用于显示一个任务的进度。我们可以通过以下方式使用LinearProgressIndicator：

LinearProgressIndicator(
  value: 0.5, // 当前进度，范围为0.0到1.0
  backgroundColor: Colors.grey, // 进度条的背景颜色
  valueColor: Colors.blue, // 进度条的颜色
);

2. 圆形进度条CircularProgressIndicator

CircularProgressIndicator是一个圆形的进度条，它通常用于显示一个正在加载或处理的任务。我们可以通过以下方式使用CircularProgressIndicator：

CircularProgressIndicator(
  value: 0.5, // 当前进度，范围为0.0到1.0
  backgroundColor: Colors.grey, // 进度条的背景颜色
  valueColor: Colors.blue, // 进度条的颜色
);

3. 模糊进度指示

有时候，我们可能需要显示一个模糊的进度指示，比如当我们正在加载数据或处理一个任务时。我们可以通过以下方式实现模糊进度指示：

LinearProgressIndicator(
  value: null, // 不显示具体进度
  backgroundColor: Colors.grey, // 进度条的背景颜色
  valueColor: Colors.blue, // 进度条的颜色
);

CircularProgressIndicator(
  value: null, // 不显示具体进度
  backgroundColor: Colors.grey, // 进度条的背景颜色
  valueColor: Colors.blue, // 进度条的颜色
);

4. 进度条的样式

我们可以通过设置LinearProgressIndicator和CircularProgressIndicator的样式来改变它们的视觉外观。例如，我们可以设置进度条的高度、颜色、边框等。

LinearProgressIndicator(
  value: 0.5,
  backgroundColor: Colors.grey,
  valueColor: Colors.blue,
  minHeight: 10.0, // 进度条的高度
  borderRadius: BorderRadius.circular(5.0), // 进度条的边框半径
);

CircularProgressIndicator(
  value: 0.5,
  backgroundColor: Colors.grey,
  valueColor: Colors.blue,
  strokeWidth: 10.0, // 进度条的宽度
  borderRadius: BorderRadius.circular(5.0), // 进度条的边框半径
);