Flutter – 圆形和线性进度指示器

简介

在 Flutter 中，您可以使用 CircularProgressIndicator 和 LinearProgressIndicator 控件来显示圆形和线性进度指示器。

这些控件非常有用，特别是在需要表示某个任务正在进行中或需要一些时间来完成时。

在本文中，我将向您展示如何在 Flutter 中使用这些控件，并说明它们可用的常见属性。

环境

在开始本文之前，请确保您在本地机器上安装了 Flutter。

使用

Circular Progress Indicator

要添加圆形进度指示器，请使用 CircularProgressIndicator 控件。

以下是一个示例代码片段，将显示一个 default 样式的圆形进度指示器：

CircularProgressIndicator()

您可以设置以下属性：

• value: 可以设置进度的值（范围在0-1之间）。
• backgroundColor: 可以设置进度指示器的背景颜色。
• valueColor: 可以设置进度指示器的前景颜色。

以下是一个示例代码片段，其中包含一些属性：

CircularProgressIndicator(
  value: 0.5,
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

这将显示一个进度为 50% 的蓝色圆形进度指示器。

Linear Progress Indicator

要添加线性进度指示器，请使用 LinearProgressIndicator 控件。

以下是一个示例代码片段，将显示一个 default 样式的线性进度指示器：

LinearProgressIndicator()

您可以设置以下属性：

• value: 可以设置进度的值（范围在0-1之间）。
• backgroundColor: 可以设置进度指示器的背景颜色。
• valueColor: 可以设置进度指示器的前景颜色。
• minHeight: 可以设置指示器的高度。

以下是一个示例代码片段，其中包含一些属性：

LinearProgressIndicator(
  value: 0.5,
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  minHeight: 10,
)

这将显示一个进度为50％，高度为10px的蓝色线性进度指示器。

结论

在 Flutter 中，使用 CircularProgressIndicator 和 LinearProgressIndicator 可以轻松添加圆形或线性进度指示器，并向用户显示任务正在进行中或需要时间完成的信息。您可以设置许多属性来自定义它们的外观，并使其符合您的应用程序的主题。