【Flutter 问题系列第 52 篇】如何给 Flutter 中的 LinearProgressIndicator 组件添加圆角

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

如果你对 LinearProgressIndicator 组件不太熟悉，可以看下这篇博客 LinearProgressIndicator (水平进度条组件) 。

问题描述

App 的应用内更新，经常会涉及到下载 apk 文件的操作，在下载时会显示当前的下载进度，UI 给的设计图如下所示

实现这样的功能，第一个想法就是在 LinearProgressIndicator 外部嵌套一个 Container 盒子，然后设置该盒子的圆角就行了，代码如下

return Container(
  height: 20,
  width: 300,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(15)),
  ),
  child: LinearProgressIndicator(
    value: 0.5,
    backgroundColor: Color(0xFF7E7F88).withOpacity(0.15),
    valueColor: AlwaysStoppedAnimation(Color(0xFFFD785D)),
  ),
);

效果图如下

增加圆角并没有起到作用，查看 LinearProgressIndicator 的源码后，知道该组件也是嵌套在 Container 之下，然后剩下的就是各种复杂的 Paint 绘制操作了。

解决方案一

最快的解决方案是在 LinearProgressIndicator 组件外嵌套一个 ClipRRect 组件，然后设置其圆角属性 borderRadius 的值即可，代码如下所示

return Container(
  height: 20,
  width: 300,
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(100)),
    child: LinearProgressIndicator(
      value: 0.5,
      backgroundColor: Color(0xFF7E7F88).withOpacity(0.15),
      valueColor: AlwaysStoppedAnimation(Color(0xFFFD785D)),
    ),
  ),
);

效果图如下

进度条的圆角是有了，但细心的你可能会发现，UI 给的内部进度条也是有圆角的(箭头所指)，

如果要求必须按照 UI 设计图上的来，依我所知的，除非你改源码，否则就只能自定义的了，也就是下面的解决方案二。

解决方案二

设计思路

• 使用层叠组件 Stack ，下面的 Container 盒子当背景，上面的 Container 盒子当进度条。
• 根据返回的当前进度的 double 值所占全部文件的百分比，转换为上面 Container 所占下面 Container 宽度的百分比即可。

代码如下所示

return Stack(
  children: [
  // 下面的背景盒子
    Container(
      height: 20,
      width: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        color: Color(0xFF7E7F88).withOpacity(0.15),
      ),
    ),
    // 上面的进度条盒子
    Container(
      height: 20,
      width: 150, // 动态更改进度条盒子的宽度即可
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        color: Color(0xFFFD785D),
      ),
    ),
  ],
);

效果图如下

这个就和 UI 设计的一模一样了。

至此，关于如何给 Flutter 中的 LinearProgressIndicator 组件添加圆角便介绍到这里。

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

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

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