【Flutter 组件系列第 1 篇】LinearProgressIndicator (水平进度条组件)

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

一：LinearProgressIndicator 的构造函数

LinearProgressIndicator，翻译过来是"线性进度指示器"，也叫水平进度条或条形进度条，用法和 CircularProgressIndicator (圆形进度条组件) 一样，下面是其源码中构造函数的一部分

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

二：基本用法

LinearProgressIndicator(),

动态效果演示图如下

LinearProgressIndicator 默认充满父组件，其本身不能设置高度，不过我们可以套一层父组件，设置高度来间接设置LinearProgressIndicator 的高度，如 Container，SizedBox 等，如下代码所示

Container(
  height: 20,
  child: LinearProgressIndicator(),
),

动态效果演示图如下

三：设置进度具体值

LinearProgressIndicator(value: 0.4),

效果图如下

如果 value 是动态获取的，你就会看到一个动态的水平进度条，比如下载文件时的进度。

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

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

效果图如下

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

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

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

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

---

结束语

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

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