【Flutter实战】进度指示器

浩浩
• 阅读 2022

3.8 进度指示器

Material 组件库中提供了两种进度指示器:LinearProgressIndicatorCircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况,比如文件下载;而模糊进度则用户任务进度无法准确获得的情况,如下拉刷新,数据提交等。

LinearProgressIndicator

LinearProgressIndicator是一个线性、条状的进度条,定义如下:

LinearProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  ...
})
  • valuevalue表示当前的进度,取值范围为[0,1];如果valuenull时则指示器会执行一个循环动画(模糊进度);当value不为null时,指示器为一个具体进度的进度条。
  • backgroundColor:指示器的背景色。
  • valueColor: 指示器的进度条颜色;值得注意的是,该值类型是Animation<Color>,这允许我们对进度条的颜色也可以指定动画。如果我们不需要对进度条颜色执行动画,换言之,我们想对进度条应用一种固定的颜色,此时我们可以通过AlwaysStoppedAnimation来指定。

示例

// 模糊进度条(会执行一个动画)
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

运行效果如图3-30所示:

【Flutter实战】进度指示器

第一个进度条在执行循环动画:蓝色条一直在移动,而第二个进度条是静止的,停在50%的位置。

CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条,定义如下:

 CircularProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  this.strokeWidth = 4.0,
  ...   
}) 

前三个参数和LinearProgressIndicator相同,不再赘述。strokeWidth 表示圆形进度条的粗细。示例如下:

// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%,会显示一个半圆
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

运行效果如图3-31所示:

【Flutter实战】进度指示器

第一个进度条会执行旋转动画,而第二个进度条是静止的,它停在50%的位置。

自定义尺寸

我们可以发现LinearProgressIndicatorCircularProgressIndicator,并没有提供设置圆形进度条尺寸的参数;如果我们希望LinearProgressIndicator的线细一些,或者希望CircularProgressIndicator的圆大一些该怎么做?

其实LinearProgressIndicatorCircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点,我们便可以通过尺寸限制类Widget,如ConstrainedBoxSizedBox (我们将在后面容器类组件一章中介绍)来指定尺寸,如:

// 线性进度条高度指定为3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圆形进度条直径指定为100
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

运行效果如图3-32所示:

【Flutter实战】进度指示器

注意,如果CircularProgressIndicator显示空间的宽高不同,则会显示为椭圆。如:

// 宽高不等
SizedBox(
  height: 100,
  width: 130,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

运行效果如图3-33所示:

【Flutter实战】进度指示器

进度色动画

前面说过可以通过valueColor对进度条颜色做动画,关于动画我们将在后面专门的章节详细介绍,这里先给出一个例子,读者在了解了Flutter动画一章后再回过头来看。

我们实现一个进度条在3秒内从灰色变成蓝色的动画:

import 'package:flutter/material.dart';

class ProgressRoute extends StatefulWidget {
  @override
  _ProgressRouteState createState() => _ProgressRouteState();
}

class _ProgressRouteState extends State<ProgressRoute>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    //动画执行时间3秒  
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
            Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                .animate(_animationController), // 从灰色变成蓝色
              value: _animationController.value,
            ),
          );
        ],
      ),
    );
  }
}

自定义进度指示器样式

定制进度指示器风格样式,可以通过CustomPainter Widget 来自定义绘制逻辑,实际上LinearProgressIndicatorCircularProgressIndicator也正是通过CustomPainter来实现外观绘制的。关于CustomPainter,我们将在后面“自定义Widget”一章中详细介绍。

flutter_spinkit 包提供了多种风格的模糊进度指示器,读者若是感兴趣,可以参考。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章教会你使用JS+CSS实现一个简单加载进度条的效果
大家好,我是前端进阶者,今天给大家来做个小项目,一起来看看吧一、前言我们经常在网页上,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JSCSS结合做简单一个加载进度条的效果。二、项目准备软件:HBuilderX。三、项目实现1\.body创建2个div,外部div添加id"progress"属
Wesley13 Wesley13
3年前
java eleven进度条
一个矩形组件MethodDescribleJProgrssBar()不带进度字符,最小值0最大值100的水平进度条JProgressBar(intorient)VERTICAL/HORIZONTALJProgressBar(intin,intmax)指定最大最小的水平进度条JProgressBar(intorien
徐小夕 徐小夕
3年前
3分钟教你用原生js实现具有进度监听的文件上传预览组件
本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等。组件设计架构如下:(https://imghelloworld.osscnbeijing.
Stella981 Stella981
3年前
React Native (一) react
ReactNative(一)reactnativevideo实现音乐播放器和进度条的功能功能:1.卡片滑动切歌2.显示进度条效果图:!(https://oscimg.oschina.net/oscnet/3c
Stella981 Stella981
3年前
Notification使用详解之二:可更新进度的通知
上次和大家分享了关于Notification的基础应用,包括简单的通知和自定义视图的通知。今天和大家分享一下如何实现一个可更新进度的通知。我们将会模拟一个下载任务,先启动一个线程负责模拟下载工作,在这个过程中更新进度信息,然后下载线程把最新的进度信息以消息的形式,发送到UI线程的消息队列中,最后UI线程负责根据最新的进度信息来更新进度通知的UI界面。
Stella981 Stella981
3年前
Cocos Creator Slider(进度条)的三种实现
实现原理:_方法一:动态计算,slider上增加背景图,根据滑动的进度动态计算背景图的大小;方法二:sliderprogress,根据slider滑动的进度,动态改变progress的显示进度;方法三:slidermask,根据slider的滑动进度,动态该表mask显示区域大小;_如果滑动条显示用的是九宫格,推荐方法一和
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Stella981 Stella981
3年前
Notification使用详解之三:通过服务更新进度通知&在Activity中监听服务进度
上次我们讲到如何实现一个可更新的进度通知,实现的方式是启动一个线程模拟一个下载任务,然后根据任务进度向UI线程消息队列发送进度消息,UI线程根据进度消息更新通知的UI界面。可是在实际应用中,我们一般会将上传、下载等比较耗时的后台任务以服务的形式运行,更新进度通知也是交由后台服务来完成的。不过有的时候,除了在通知里面显示进度信息,我们也要在Activit
WeiSha100 WeiSha100
2年前
如何控制学员的完成度以及对学员学习进行监督呢
首先登录学员账号,右上角找到个人中心,在这里可以看到课程学习的进度,包括视频进度,刷题进度以及模拟测试结课考试的完成度如何后台控制设置学员的完成度应用场景用于申报审核的客户对学员学习进度老达不到100%的情况很头疼虽然学习进度是系统统计,人为不能控制,为了避免部分学员达不到100%不好交差,管理员可以控制视频容差,让视频进度显示100%容差值  增加学习完
万界星空科技 万界星空科技
7个月前
MES定制开发/云MES制造执行系统解决方案
​一、制造业面临的问题:1、企业部门信息孤岛:数据依靠人工统计汇报和纸质单据传递,信息传递不及时,部门响应严重滞后。2、生产进度无法掌控:生产数据停留在纸质单据,缺乏系统汇总,生产各流程进度无法实时获取。3、质量问题无法追溯:成品、在制品状况无法实时统计质