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)),
        ),

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