【Flutter 组件系列第 4 篇】RefreshProgressIndicator (下拉刷新组件)

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

一：RefreshProgressIndicator 的构造函数

RefreshProgressIndicator 翻译过来是"刷新指示器"，通常用于下拉刷新，继承于 CircularProgressIndicator，与父类的差别就是 strokeWidth 默认为 2，而父类默认为 4。

下面是 RefreshProgressIndicator 的构造函数

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

二：基本用法

RefreshProgressIndicator(),

效果图如下

三：设置进度具体值

RefreshProgressIndicator(value: 0.5),

效果图如下

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

RefreshProgressIndicator(
	value: 0.5,
    backgroundColor: Colors.black, // 背景色为黑色
    valueColor: AlwaysStoppedAnimation(Colors.pink), // 进度值颜色为粉色
),

效果图如下

五：设置线的宽度

RefreshProgressIndicator(strokeWidth: 5),

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

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

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

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

结束语 Google 的 Flutter 越来越火，截止 2020年8月13日 GitHub 标星已达 98.4K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。