Flutter 中各种「指示器」的使用详解 | Flutter Widgets

这是我参与更文挑战的第29天，活动详情查看： 更文挑战

前言

在实际应用开发当中，我们需要考虑用户的网络状态，如果网络不是很好，请求响应较慢或是各种进度状态，我们都需要使用加载状态和进度友好的展示给用户，让用户感知做出合理等待，今天我们就看看 Flutter 中的各种指示器 Widget 的使用。

看效果

LinearProgressIndicator（线性进度指示器）

简单使用

我们直接加载就是一个一直运动的指示器，没有任何进度，比如 Google 的登录就是这个，因为没有明确的进度可以展示，所以仅展示一个加载的状态。

LinearProgressIndicator()

• 展示效果

参数调配

很多情况下我们需要修改背景和进度条颜色、也要有明确的进度展示，这时我们就通过参数设置即可。

看看源码

LinearProgressIndicator 集成自 ProgressIndicator ，只有一个当前类属性 minHeight

ProgressIndicator 抽象类，继承自 StatefulWidget。这里为啥是 StatefulWidget ？肯定是内部有自变量需要自更新

我们再看看State 的 build 方法

• _controller 是 AnimationController，驱动内部的更新
• value 不等于空则构建 _buildIndicator ，忽略 _controller.value，使用 widget.value
• value 为空则使用 AnimatedBuilder 内部构建更新，就出现了上面简单使用的一直加载的情况

设置进度

上面我们看了源码，现在就非常清晰了，直接上代码

LinearProgressIndicator(
  value: 0.5,
)

设置高度

开始看源码说了，只有一个当前类属性 minHeight 就可以设置高度，默认值是 4

LinearProgressIndicator(
  value: controller.value,
  minHeight: 10,
)

设置颜色

LinearProgressIndicator(
  value: controller.value,
  // 背景色
  backgroundColor: Colors.red,
  // 设置进度条颜色
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.greenAccent,
      end: Colors.orange,
    ),
  ),
)

自定义动态进度

看源码知道如果需要动态设置进度，则需要设置动画，核心代码如下

// with TickerProviderStateMixin
// 动画控制器
late AnimationController controller;
@override
void initState() {
  // 初始化动画控制器
  controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 3),
  )..addListener(() {
    // 监听刷新
    setState(() {});
  });
  // 设置来回重复运行
  controller.repeat(reverse: true);
  super.initState();
}

@override
void dispose() {
  // 销毁
  controller.dispose();
  super.dispose();
}

// 代码使用
controller.value

CircularProgressIndicator（圆形进度指示器）

上面看完线性的，接下来看看圆形的，通用内容就不重复聊了，最后放个大的动图

简单使用

CircularProgressIndicator()

参数调配

// 设置进度
CircularProgressIndicator(
  value: controller.value,
),
// 设置线宽
CircularProgressIndicator(
  strokeWidth: 10,
),
// 设置颜色
CircularProgressIndicator(
  backgroundColor: Colors.grey.withOpacity(0.4),
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.amber,
      end: Colors.green,
    ),
  ),
),
// 设置进度+颜色
CircularProgressIndicator(
  value: controller.value,
  backgroundColor: Colors.grey.withOpacity(0.4),
  valueColor: controller.drive(
    ColorTween(
      begin: Colors.blue,
      end: Colors.pink,
    ),
  ),
)

进度条颜色固定

CircularProgressIndicator(
  value: controller.value,
  // 固定一种颜色
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

CupertinoActivityIndicator（iOS 活动指示器）

Flutter 是跨平台的框架，所以除了Google 的 Material design 还应该有 iOS 的 Cupertino 风格，下面我们就一起看看吧

看源码

Flutter 看源码非常方便和快捷，多看看源码你会有很多收获。

源码很简单，就只有radius（半径，默认是 10）、animating（动画中）、progress（进度）三个参数

简单使用

CupertinoActivityIndicator()

参数调配

CupertinoActivityIndicator(
  // 设置半径
  radius: 20,
),
CupertinoActivityIndicator.partiallyRevealed(
  radius: 20,
  // 设置进度
  progress: controller.value,
),

平台自适配

这里 Flutter 也为我们准备了自动根据平台适配的加载指示器，参数调配都一样

CircularProgressIndicator.adaptive()

iOS 平台	Android 平台

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考链接

• LinearProgressIndicator (Flutter Widget of the Week)
• Flutter-LinearProgressIndicator
• CircularProgressIndicator (Flutter Widget of the Week)
• Flutter-CircularProgressIndicator
• CupertinoActivityIndicator (Flutter Widget of the Week)
• Flutter-CupertinoActivityIndicator

关注专栏

• 此文章已收录到下面👇 的专栏，可以直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦