flutter 自己写一个步骤条

编写一个竖直效果的步骤条

效果图：

实现：

是采用组合控件的方式来实现的。

使用方式：

例如：

Xsteps(
       current: 1,
       childrens: mChildrens,
     )

源码实现:

class Xsteps extends StatefulWidget {
  final int current;
  final List<Widget> childrens;
  final Color outColor;
  final Color innerSelectColor;
  final Color innerUnSelectColor;

  Xsteps(
      {this.current,
      this.childrens,
      this.innerSelectColor = const Color(0xff3B8CFF),
      this.innerUnSelectColor = const Color(0xffbdbdbd),
      this.outColor = const Color(0xffbdbdbd)})
      : assert(current != null),
        assert(childrens != null);

  @override
  State<StatefulWidget> createState() {
    return XstepsState();
  }
}

class XstepsState extends State<Xsteps> {
  List<double> heights = List();

  @override
  Widget build(BuildContext context) {
    List<Widget> mViews = List();
    for (int i = 0; i < widget.childrens.length; i++) {
      Widget childrenItem = widget.childrens[i];
      List<Widget> rowWidgets = List();
      rowWidgets.add(buildItemProgress(i));
      rowWidgets.add(RectProvider(
        child: childrenItem,
        onGetRect: (Rect r) {
        <!--对传递进来的childrens 获取对应的高度来设置步骤条每一步的高度-->
          heights.add(r.height);
          if (i == widget.childrens.length - 1) {
            setState(() {});
          }
        },
      ));
      Row row = Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: rowWidgets,
      );
      mViews.add(row);
    }
    Column columnProgress = Column(
      children: mViews,
    );
    return columnProgress;
  }

  buildItemProgress(int index) {
    return Container(
      alignment: Alignment.topCenter,
      width: ScreenUtil().setWidth(15),
      child: Column(
        children: <Widget>[
          Stack(
            alignment: Alignment.topCenter,
            children: <Widget>[
              Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  Offstage(
                    child: Container(
                      decoration: BoxDecoration(
                          color: Color.fromARGB(77, 59, 140, 255),
                          shape: BoxShape.circle),
                      width: ScreenUtil().setWidth(15),
                      height: ScreenUtil().setWidth(15),
                    ),
                    offstage: index != widget.current,
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: index > widget.current
                            ? widget.innerUnSelectColor
                            : widget.innerSelectColor,
                        shape: BoxShape.circle),
                    width: ScreenUtil().setWidth(9),
                    height: ScreenUtil().setWidth(9),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.only(
                    top: index != widget.current
                        ? ScreenUtil().setWidth(9)
                        : ScreenUtil().setWidth(12)),
                height: heights.length == widget.childrens.length
                    ? heights[index]
                    : 0,
                width: ScreenUtil().setWidth(1),
                color: index >= widget.current
                    ? widget.outColor
                    : widget.innerSelectColor,
              )
            ],
          )
        ],
      ),
    );
  }

  setStepsHeight(double height) {
    setState(() {});
  }
}

github地址:

github.com/check0927/f…

pub

flutter_xsteps: ^1.0.2