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

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

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

前言

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

看效果

01.gif

LinearProgressIndicator(线性进度指示器)

简单使用

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

LinearProgressIndicator()
复制代码
  • 展示效果

02.gif

参数调配

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

看看源码

image.png

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

image.png

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

image.png

我们再看看State 的 build 方法

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

设置进度

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

LinearProgressIndicator(
  value: 0.5,
)
复制代码

03.gif

设置高度

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

LinearProgressIndicator(
  value: controller.value,
  minHeight: 10,
)
复制代码

image.png

设置颜色

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

04.gif

自定义动态进度

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

// 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()
复制代码

05.gif

参数调配

// 设置进度
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,
    ),
  ),
)
复制代码

06.gif

进度条颜色固定

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

07.gif

CupertinoActivityIndicator(iOS 活动指示器)

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

看源码

Flutter 看源码非常方便和快捷,多看看源码你会有很多收获。
image.png

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

简单使用

CupertinoActivityIndicator()
复制代码

08.gif

参数调配

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

09.gif

平台自适配

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

CircularProgressIndicator.adaptive()
复制代码
iOS 平台Android 平台
08.gif05.gif

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

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

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

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改