flutter 自定义widget之步骤引导线guide_line

最新推荐文章于 2024-09-11 07:37:02 发布

麻辣炖土豆儿

最新推荐文章于 2024-09-11 07:37:02 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/xiaomi_0/article/details/103472455

版权

本文介绍了如何在Flutter中创建一个自定义的步骤引导线Widget。通过使用ListView来展示元素，结合条件判断实现步骤指示器的效果。示例代码和思路清晰，适合初学者实践。

摘要由CSDN通过智能技术生成

我上传了资源，但是默认是5积分，我找不到更改的地方了，大家不要花费积分下载，发送邮件给我，我发给你

cvilia@163.com

接触Flutter 6个月多了，看到越来越多的大佬写出来开源项目或插件，真的是羡慕不已，而我自己依然在CV的道路上举步维艰。

话不多说，先看需求

就是这么简单的一个小部件

，本来想着每一页就重新绘制，然后一大段代码写下来，后来越写代码越多，干脆自己写个小部件。

原理很简单，我们把一个圆和一条线作为一个元素，如图中一共有两个元素和多出来的一个圆，把最后的圆当作特殊的元素放进List里面去，于时我们想到了用ListView去展示，先上代码

class GuideLine extends StatelessWidget {
  final int pointNum;
  final int stepIndex;
  final Color activeColor;
  final Color defaultColor;
  final Axis scrollDirection;

  ///[pointNum] 以一个圆一条横线作为一个元素，
  ///这是圆的总个数即为数组的长度，那么元素的个数为pointNum-1,最后一个元素为圆
  ///[stepIndex]用来表述