Flutter速来系列8：伟大的进度条 LinearProgressIndicator和CircularProgressIndicator

在it发展历史上，进度条，尤其是带进度的进度条的产生，绝对是一个伟大的诞生。

---

在Flutter应用开发中，无论是处理网络请求，执行耗时任务，或是等待用户响应，我们总是需要在界面上显示进度条或者等待指示器。在这篇博客中，我们将介绍Flutter中两种常用的进度指示器：LinearProgressIndicator 和 CircularProgressIndicator。我们将比较它们的异同点，以及如何使用和自定义它们。

1. LinearProgressIndicator和CircularProgressIndicator的异同点

相同点：

• 都是进度指示器，用于在应用执行某项任务时提供视觉反馈。
• 都可以设置为确定的进度模式（显示当前进度）和不确定的进度模式（表示任务正在进行，但具体进度未知）。

不同点：

• 形状不同：LinearProgressIndicator 是线性的，水平显示，而 CircularProgressIndicator 是圆形的，类似于加载旋转轮。
• 由于形状的差异，两者在空间使用上有所不同，LinearProgressIndicator 通常用于宽度更大的空间，而 CircularProgressIndicator 则适用于任何方向的空间。

2. 两者的使用和效果对比

在开始介绍如何使用这两个组件之前，我们先看一下他们的效果。以下是一个简单的Flutter应用，其中包含一个 LinearProgressIndicator 和一个 CircularProgressIndicator。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Progress Indicators')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              LinearProgressIndicator(),
              CircularProgressIndicator(),
            ],
          ),
        ),
      ),
    ),
  );
}

在这个例子中，我们将两个进度指示器放置在屏幕的中央。当你运行这个程序时，你会看到一个水平的进度条和一个旋转的圆形进度指示器。

3. 如何使用LinearProgressIndicator和CircularProgressIndicator

现在我们来看一下如何使用这两个组件。

LinearProgressIndicator

LinearProgressIndicator 的主要参数有：

• value：一个介于0.0和1.0之间的数字，表示进度。当值为null时，进度指示器将进入不确定的模式，显示一个循环动画。
• backgroundColor：进度条的背景颜色。
• valueColor：进度条的颜色。通常与 AlwaysStoppedAnimation<Color> 一起使用。

下面是如何创建一个具有确定进度的 LinearProgressIndicator 的例子：

LinearProgressIndicator(
  value: 0.5,  // 进度值，0.5表示50%
  backgroundColor: Colors.grey[200],  // 进度条的背景颜色
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),  // 进度条的颜色
)

注意：这个进度条就是到50%。但是不会动的

CircularProgressIndicator

CircularProgressIndicator 的主要参数和 LinearProgressIndicator 相似，它也有 value、backgroundColor 和 valueColor。

下面是如何创建一个具有确定进度的 CircularProgressIndicator 的例子：

CircularProgressIndicator(
  value: 0.5,  // 进度值，0.5表示50%
  backgroundColor: Colors.grey[200],  // 进度条的背景颜色
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),  // 进度条的颜色
)

这个进度条也是显示进度为50%，但是不会动的

4. 自定义LinearProgressIndicator和CircularProgressIndicator

在默认设置下，LinearProgressIndicator 和 CircularProgressIndicator 都有相当不错的样式，但有时我们可能希望自定义它们的外观。以下是两种进度指示器的自定义示例：

自定义 LinearProgressIndicator

我们可以通过 ThemeData 来自定义 LinearProgressIndicator 的样式。

Theme(
  data: Theme.of(context).copyWith(
    linearProgressIndicatorTheme: LinearProgressIndicatorThemeData(
      backgroundColor: Colors.grey[200],
      color: Colors.blue,
    ),
  ),
  child: LinearProgressIndicator(),
)

在这个例子中，我们自定义了 LinearProgressIndicator 的背景颜色和进度条颜色。

自定义 CircularProgressIndicator

我们同样可以通过 ThemeData 来自定义 CircularProgressIndicator 的样式。

Theme(
  data: Theme.of(context).copyWith(
    circularProgressIndicatorTheme: CircularProgressIndicatorThemeData(
      backgroundColor: Colors.grey[200],
      color: Colors.blue,
    ),
  ),
  child: CircularProgressIndicator(),
)

这个例子中，我们自定义了 CircularProgressIndicator 的背景颜色和进度条颜色。

总结来说，LinearProgressIndicator 和 CircularProgressIndicator 是Flutter中两个非常有用的组件，它们能帮助我们在应用中提供良好的用户体验。