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

最新推荐文章于 2024-08-21 12:52:20 发布

麻辣炖土豆儿

最新推荐文章于 2024-08-21 12:52:20 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我上传了资源，但是默认是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]用来表述进行到第几步，从而给元素上色,请注意这里的stepIndex是从1开始
  ///
  GuideLine(
      {@required this.pointNum,
      @required this.stepIndex,
      this.activeColor = Colours.bg_green,
      this.defaultColor = Colours.default_guide_line,
      this.scrollDirection = Axis.horizontal});

  @override
  Widget build(BuildContext context) {
    return scrollDirection == Axis.horizontal
        ? SizedBox(
            width: ScreenUtil().setWidth(pointNum * 46 + (pointNum - 1) * 320),
            height: ScreenUtil().setWidth(46),
            child: ListView.builder(
              scrollDirection: scrollDirection,
              itemBuilder: (_, index) {
                if (index == pointNum - 1) {
                  return Container(
                    width: ScreenUtil().setWidth(46),
                    decoration: BoxDecoration(
                        color:
                            index == (stepIndex-1) ? activeColor : defaultColor,
                        borderRadius:
                            BorderRadius.circular(ScreenUtil().setWidth(46))),
                  );
                }
                return Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      width: ScreenUtil().setWidth(46),
                      decoration: BoxDecoration(
                          color: (stepIndex-1) >= index
                              ? activeColor
                              : defaultColor,
                          borderRadius:
                              BorderRadius.circular(ScreenUtil().setWidth(46))),
                    ),
                    Container(
                      height: ScreenUtil().setHeight(5),
                      width: ScreenUtil().setWidth(320),
                      color: (stepIndex-1) > index ? activeColor : defaultColor,
                    )
                  ],
                );
              },
              itemCount: pointNum,
            ),
          )
        : SizedBox(
            height: ScreenUtil().setWidth(46 * pointNum) +
                ScreenUtil().setHeight(320),
            child: ListView.builder(
              scrollDirection: scrollDirection,
              itemBuilder: (_, index) {
                return Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      width: ScreenUtil().setWidth(46),
                      decoration: BoxDecoration(
                          color: index == (stepIndex-1)
                              ? activeColor
                              : defaultColor,
                          borderRadius:
                              BorderRadius.circular(ScreenUtil().setWidth(46))),
                    ),
                    Container(
                      width: ScreenUtil().setHeight(5),
                      height: ScreenUtil().setHeight(320),
                      color: (stepIndex-1) > index ? activeColor : defaultColor,
                    )
                  ],
                );
              },
              itemCount: pointNum,
            ),
          );
  }
}

解释一下，途中的Colours为我自己定义的颜色，大家可以根据需求去自定义自己的颜色。

还有一个就是ListView方向的问题，稍微做一下判断就好了，需要注意的是，不同方向的时候线的宽高也是不同的，ListView的长度宽度计算也是不同的。

有关stepIndex-1的问题，假设一共有三个圆，那么当进行到第二步，也就是第二个元应该亮的时候，渲染时就要与index进行判断，这个判断是包括当前颜色以及已经完成步骤的颜色，第二步的时候，当前的list元素index为1，而线只能亮第一条，所以就stepindex-1与index做判断，如果大于index就是activeColor了，

大家还可以自定义圆里面的数字，可以自己动手试一下，不是特别难，欢迎随时提问