【Flutter 组件系列第 2 篇】CircularProgressIndicator (圆形进度条组件)Flutte

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

这是【Flutter 组件系列第 2 篇】，如果觉得有用的话，欢迎关注专栏。

一：CircularProgressIndicator 的构造函数

CircularProgressIndicator，圆形进度条组件，用法和 LinearProgressIndicator (水平进度条组件) 一样，下面是其源码中构造函数的一部分

 const CircularProgressIndicator({
    Key key,
    // [0，1] 的浮点数，用来表示进度多少，0 表示无进度，1 表示进度已完成。
    // 如果 value 为 null，则显示一个动画，否则显示一个定值 
    double value,
    // 进度条背景颜色，默认颜色 ThemeData.backgroundColor
    Color backgroundColor,
    // Animation 类型的参数，用来设定进度值的颜色，默认颜色 ThemeData.accentColor，如果想自定义颜色，
    // 则使用 AlwaysStoppedAnimation<Color>(color)
    Animation<Color> valueColor,
    // 用于画圆的线的宽度，默认为 4
    this.strokeWidth = 4.0,
    String semanticsLabel,
    String semanticsValue,
  })

二：基本用法

CircularProgressIndicator(),

动态效果演示图如下

在这里插入图片描述

三：设置进度具体值

CircularProgressIndicator(value: 0.7),

效果图如下

在这里插入图片描述

四：设置背景色、进度条颜色

CircularProgressIndicator(
	value: 0.7,
    backgroundColor: Colors.black, // 背景色为黑色
    valueColor: AlwaysStoppedAnimation<Color>(Colors.pink), // 进度值颜色为粉色
),

效果图如下

在这里插入图片描述

五：设置线的宽度

CircularProgressIndicator(strokeWidth: 10),

效果图如下

在这里插入图片描述

剩下的两个属性 semanticsLabel 和 semanticsValue，官方说明分别是 "语义标签" 和"语义值"，有兴趣的可以了解一下。

最后附上 CircularProgressIndicator 的官方文档链接，方便大家参考查看。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语
Google 的 Flutter 越来越火，截止 2020年8月13日 GitHub 标星已达 98.4K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到稀土掘金博客中，希望自己学习的同时，也可以帮助更多的人。