第二百五十三回

发布时间:2024年01月08日

概念介绍

进度条是常用的组件之一,它主要用来显示某种动作的完成进度。Flutter提供了多种进度条组件,常用的是水平进度条:LinearProgressIndicator;圆形进度条
:CircularProgressIndicator和RefreshProgressIndicator。接下来我们分析介绍它们的用法。

在这里插入图片描述

使用方法

和其它的Widget一样,进度条提供了相关的属性来控制自己,下面是常用的属性:

  • backgroundColor属性用来控制进度条背景颜色,就是进度条中全部进度的颜色;
  • valueColor属性用来控制进度条中当前进度的颜色;
  • value属性用来控制当前的进度值,取值范围为0-1之间的小数;
    我们刚才说的三种进度条:LinearProgressIndicator, CircularProgressIndicator和RefreshProgressIndicator都包含这三种属性,这三种Widget
    只是显示进度的形状不同,在使用方法上完全相同。

示例代码

class _ExProgressWidgetState extends State<ExProgressWidget> {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Example of Progress indicator"),
          backgroundColor: Colors.purpleAccent,
        ),
        body: Container(
          width: 500,
          height: 700,
          alignment: Alignment.center,
          // child: const LinearProgressIndicator(
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.purpleAccent),
          //   value: 0.5,
          // ),
          // child: const CircularProgressIndicator(
          //   strokeWidth: 9,
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.yellow),
          //   value: 0.3,
          // ),
          child: const RefreshProgressIndicator(
            backgroundColor: Colors.blue,
            valueColor: AlwaysStoppedAnimation(Colors.yellow),
            // value: 1.0,
          )
        )
    );
  }
}

在上面的代码中我们分别使用了刚才介绍的三种进度条,它们的使用方法完成相同,只是形状不同,详细如下:
LinearProgressIndicator表示一个水平的进度条,当前进度是50%,显示为紫色,所有进度是100%,显示为蓝色;
CircularProgressIndicator表示一个圆形的进度条,当前进度是30%,显示为黄色,所有进度是100%,显示为蓝色;
RefreshProgressIndicator表示圆形进度条,不过它是在一个圆形背景上显示圆形的箭头,箭头的长度表示进度,显示为白色,整个背景显示为蓝色;
这里只是文字性的描述,大家可以自己动手编译程序,这样可以看到真实的运行效果。我在这里就不演示程序运行效果了,不过有些注意点还是需要做一些说明:
当前进度的颜色属性值是一个动画对象:AlwaysStoppedAnimation(),不是颜色对象,我们在后面介绍动画时再详细介绍。当前进度值是0-1之间的小数,
用来表示当前的进度,我们可以动态地修改该属性值,进而实现进度不断变化的效果。如果没有给该属性赋值,那么它会一起不停地显示进度变化过程。
看官们,关于进度条Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

文章来源:https://blog.csdn.net/talk_8/article/details/135468193
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。