Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator

更多文章请查看 flutter从入门 到精通

Flutter Progress

1 条形无固定值进度条

在这里插入图片描述

        //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox来设置高度与宽度
        SizedBox(
          child: LinearProgressIndicator(),
          height: 8.0,
          width: 200,
        ),

2 圆形无固定值进度条

在这里插入图片描述

        SizedBox(
          child: CircularProgressIndicator(),
          height: 44.0,
          width: 44.0,
        ),

3 条形固定值进度条

在这里插入图片描述

        new SizedBox(
          //限制进度条的高度
          height: 6.0,
          //限制进度条的宽度
          width: 200,
          child: new LinearProgressIndicator(
              //0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
              value: 0.3,
              //背景颜色
              backgroundColor: Colors.yellow,
              //进度颜色
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),
        ),

4 圆形固定值进度条

在这里插入图片描述

        //CircularProgressIndicator不具备设置高度的选项,可以使用SizedBox来设置高度与宽度
        new SizedBox(
          //限制进度条的高度
          height: 40.0,
          //限制进度条的宽度
          width: 40,
          child: new CircularProgressIndicator(
            //0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
              value: 0.3,
              //背景颜色
              backgroundColor: Colors.yellow,
              //进度颜色
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),
        ),

本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页