Flutter | 自定义一个 Stepper 步骤组件

起因

前段时间群里的一个小伙伴问了这样一个 UI:

因为当时了解过 Material 组件库里有一个 Stepper 控件,是类似的效果,我就和他说,可以魔改一下 Stepper,感觉应该不难,然后他回过来了一个这个表情:

emmmm,没自己做过就说简单,确实有点「云程序员」。

那既然如此,没办法,只能把他拎到河边烤了,哦不对,只能自己写一个了。

实现效果如下:

经过

那下面就来说说编写该控件的经过,

首先我们应该了解一下原生 Stepper 是个什么样子,并且分析一下源码。

了解原生 Stepper

还是老样子,看一下构造方法:

const Stepper({
  Key key,
  @required this.steps,
  this.physics,
  this.type = StepperType.vertical,
  this.currentStep = 0,
  this.onStepTapped,
  this.onStepContinue,
  this.onStepCancel,
  this.controlsBuilder,
}) : assert(steps != null),
assert(type != null),
assert(currentStep != null),
assert(0 <= currentStep && currentStep < steps.length),
super(key: key);

1.steps:类型为 List<Step>,每一步的对象
2.type:默认为竖向排列,我们这里需要改为 StepperType.horizontal 变成横向
3.currentStep:当前到了哪一步
4.controlsBuilder:控制的UI,默认是有「下一步」和 「取消」,我们这里没有用,可以设置为一个空的 Container

剩下没说的就可以见名知意,关于 onStepTapped 这种就是点击的回调,对于我们今天自定义 Stepper 也没用,也就不多说了。

了解了构造方法,我们就可以写一个 Demo 出来看一下:

Widget _buildStepper(){
  return Stepper(
    currentStep: 2,
    type: StepperType.horizontal,
    steps: ['提交任务', '本金返款', '评价返佣金', '追评返佣金', '任务完结']
    .map(
      (s) => Step(title: Text(s), content: Container(), isActive: true),
    )
    .toList(),
    controlsBuilder: (BuildContext context,
                      {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
      return Container();
    },
  );
}

设定 type 为 StepperType.horizontal,看下效果:

23333,还溢出了,不用管,下面来看看源码,该控件是怎么做出来的。

源码分析原生 Stepper

直接点进源码,发现是一个 StatefulWidget,那就话不多说,直接找到相对应 State 里的 build 方法:

@override
Widget build(BuildContext context) {
  // .........
  assert(widget.type != null);
  switch (widget.type) {
    case StepperType.vertical:
      return _buildVertical();
    case StepperType.horizontal:
      return _buildHorizontal();
  }
  return null;
}

前面「一大堆断言」就省略了,可以看到是判断了 type,那我们这里用的是 StepperType.horizontal,就可以直接去看 _buildHorizontal() 方法了。

先不看代码,把前面定义 Stepper 的代码改一下,改成三个:

这样代码对照着图片来看,就很容易看得懂。

先看 return 了什么:

return Column(
  children: <Widget>[
    Material(
      elevation: 2.0,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 24.0),
        child: Row(
          children: children,
        ),
      ),
    ),
    Expanded(
      child: ListView(
        padding: const EdgeInsets.all(24.0),
        children: <Widget>[
          AnimatedSize(
            curve: Curves.fastOutSlowIn,
            duration: kThemeAnimationDuration,
            vsync: this,
            child: widget.steps[widget.currentStep].content,
          ),
          _buildVerticalControls(),
        ],
      ),
    ),
  ],
);

返回了一个 Column

1.上面是一个 Row:这个就是看到的步骤的文字和 icon。
2.下面是一个 ListView:这个是上面说到的 control,在后续我们自定义Stepper 是没用的,不用管。

那我们就主要看一下 children

final List<Widget> children = <Widget>[];

for (int i = 0; i < widget.steps.length; i += 1) {
  children.add(
    InkResponse(
      onTap: widget.steps[i].state != StepState.disabled ? () {
        if (widget.onStepTapped != null)
          widget.onStepTapped(i);
      } : null,
      child: Row(
        children: <Widget>[
          Container(
            height: 72.0,
            child: Center(
              child: _buildIcon(i),
            ),
          ),
          Container(
            margin: const EdgeInsetsDirectional.only(start: 12.0),
            child: _buildHeaderText(i),
          ),
        ],
      ),
    ),
  );

  if (!_isLast(i)) {
    children.add(
      Expanded(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 8.0),
          height: 1.0,
          color: Colors.grey.shade400,
        ),
      ),
    );
  }
}

也是简单讲一下:

1.循环 widget.steps2.先添加一个 Row,Row 里面是一个 _buildIcon 和一个 _buildHeaderText3.最后判断当前 index 是否是最后一个,如果不是的话加一根横线 Container

这样就组成了我们上面看到的图,这样也就把源码简单的分析了一遍了。

魔改源码达到效果

还是先把改好的效果图放上来,对应着看

1. copy 源码

先把源码 copy 出来,然后换个名字:「CustomStepper」:

2. 去除无用的东西

刚才说 Controls 是没用的,那我们找到他并删掉:

return Column(
  children: <Widget>[
    Material(
      elevation: 2.0,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 24.0),
        child: Row(
          children: children,
        ),
      ),
    ),
    Expanded(
      child: ListView(
        padding: const EdgeInsets.all(24.0),
        children: <Widget>[
          AnimatedSize(
            curve: Curves.fastOutSlowIn,
            duration: kThemeAnimationDuration,
            vsync: this,
            child: widget.steps[widget.currentStep].content,
          ),
          _buildVerticalControls(),
        ],
      ),
    ),
  ],
);

本来是返回一个 Column,上面是我们看到的UI,下面是 Controls ,这里看看都有哪些是无用的:

1.Controls:这个是一点用都没有,并且使用了 Expanded 来占据下面所有的位置,这样的话不仅没用,而且还乱布局

2.一个阴影设置为了 2.0,这个也没什么用

3.通过 Container 设置了边距,这个也没用,一会再说

把他们全部删掉:

return Material(
  child: Row(
    children: children,
  ),
);

3. 把文字放 icon 下面

我们看更改后和更改前的页面,最不舒服的就是文字在 icon 的后面,那先拿他开刀。

上面分析源码的时候看过这样的代码:

Row(
  children: <Widget>[
    Container(
      height: 72.0,
      child: Center(
        child: _buildIcon(i),
      ),
    ),
    Container(
      margin: const EdgeInsetsDirectional.only(start: 12.0),
      child: _buildHeaderText(i),
    ),
  ],
),

从这就能发现 icon 和 text 是连着的,那先把 Row 改成 Column试试,

这里需要注意一点,Column 默认是占据最大空间,所以要设置这个属性:mainAxisSize: MainAxisSize.min

效果如下:

可以发现位置确实是变化了,但是这个线的位置好像不太对,不是在 icon 的中间。

4. 更改线的位置

刚才我们也说了,这个线就是一个 Container,定义如下:

if (!_isLast(i)) {
  children.add(
    Expanded(
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        height: 1.0,
        color: Colors.grey.shade400,
      ),
    ),
  );
}

我们想要的效果是线和 icon 的中间对齐,那可以看上面的代码,icon 外面是套了一层 Container,并且设置了 height = 72.0

那好,我们从这里下手,把线也用 Container 包起来:

if (!_isLast(i)) {
  children.add(
    Expanded(
      child: Container(
        height: 72.0,
        child: Center(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 8.0),
            height: 1.0,
            color: Colors.grey.shade400,
          ),
        ),
      ),
    ),
  );
}

效果如下:

发现效果并没有改,

那是因为 Row 的 crossAxisAlignment 值默认为:CrossAxisAlignment.center

我们需要把它改为:CrossAxisAlignment.start

效果如下:

线的位置是正确了,但是和我们的效果图还有差距,

问题就是线和 icon 没有连上。

5. 把线和 icon 连上

我们翻一下刚才的代码,可以简单的发现问题所在:

1.首先 children 添加了一个 Column,Column 里面是 icon 和 text
2.然后添加的线

问题就出在这里,如果 Column 里下面的字越多,那么线就越短,因为是在 Column 后面添加的线,

那就只能先把下面的文字拿掉,让 icon 和 线连起来:

6. 把文字放上去

线和 icon 连起来了,那现在就要把文字放上去,如何平分屏幕:

textChildren.add(Expanded(
  child: Center(
    child: _buildHeaderText(i),
  ),
));

定义一个 textChildren,在循环的时候添加一个 Expanded & Center,这样就保证了平分,并且文字在中间:

7. icon 和文字对齐

文字添加好了之后,就显示出来 icon 的问题,那么如何把 icon 和文字对齐?

首先确定好思路:给第一个 icon 和最后一个 icon 设置边距

边距的公式为:

屏幕宽度 / steps.length / 2 - icon.width / 2

解释一下就是:

  1. 用屏幕的宽度 除以 steps 的数量得到等分的宽度,
  2. 然后用这个宽度除以 2 得到一半的宽度
  3. 然后用一半的宽度 减去 icon 宽度的一半

这样就得到了应该设置的边距。

公式了解了,下面就该获取值,

屏幕宽度很好获得:MediaQuery.of(context).size.width

icon 的宽度通过查看源码也能发现:_kStepSize

那下面就可以写代码了:

Widget child;

if(i == 0){
  child = Container(
    margin: EdgeInsets.only(left: MediaQuery.of(context).size.width / widget.steps.length / 2 - _kStepSize / 2),
    child: _buildIcon(i),
  );
} else if (_isLast(i)){
  child = Container(
    margin: EdgeInsets.only(right: MediaQuery.of(context).size.width / widget.steps.length / 2 - _kStepSize / 2),
    child: _buildIcon(i),
  );
}else{
  child = _buildIcon(i);
}

1.首先判断是不是第一个或者最后一个
2.如果是的话,则分别设置左右边距
3.如果不是,则默认就好

这时候我们再把中间两个步骤加上,效果如下:

8. 当前步骤的问题

我们使用该控件最主要的点在于可以设置当前是在第几步,

通过 currentStep 来控制,那我们现在无论设置与否都没有效果,这是为何?

通过查找 _buildIcon 的源码,一路追踪,找到如下代码:

Color _circleColor(int index) {
  final ThemeData themeData = Theme.of(context);
  if (!_isDark()) {
    return widget.steps[index].isActive ? themeData.primaryColor : Colors.black38;
  } else {
    return widget.steps[index].isActive ? themeData.accentColor : themeData.backgroundColor;
  }
}

可以看到这里只是判断了 widget.steps[index].isActive,并没有判断 currentStep

这就很不合理,给他加上:

Color _circleColor(int index) {
  final ThemeData themeData = Theme.of(context);
  if (!_isDark()) {
    return widget.steps[index].isActive && index <= widget.currentStep
      ? themeData.primaryColor
      : Colors.black38;
  } else {
    return widget.steps[index].isActive
      ? themeData.accentColor
      : themeData.backgroundColor;
  }
}

判断了一下当前的 index 是否小于等于 widget.currentStep,效果如下:

icon的颜色没问题了,线的颜色还有问题,

同样的解决方案,判断一下 index,最终效果如下:

总结

其实看文章写了这么多,但是只要思路清晰,简单魔改一下源码就可以轻松达到我们想要的效果,

不得不说:魔改一时爽,一直魔改一直爽!

这个效果从头到实现也就一个小时的时间,

这一个小时不光了解了该控件是如何实现的,还认识了很多其他的控件。

美团外卖Flutter动态化实践

动态化是 Flutter 无法避开的话题。本文从 Flutter 的特点讲起, 阐述了美团外卖团队在整个 Flutter 动态化上探索的心路历程,还有设计理念、核心原理以及业务应用的经验。本文的视角也不局限于框架本身,更多思考了在解决问题的过程中技术团队需要做的事情,希望能对大家有所启发和帮助。

发布于:2天以前  |  12次阅读  |  详细内容 »

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:11天以前  |  52次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:23天以前  |  114次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:23天以前  |  112次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2346次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  1870次阅读
发布Flutter开发的iOS程序 1年以前  |  1663次阅读
Flutter插件详解及其发布插件 11月以前  |  1656次阅读
Flutter Widget框架概述 1年以前  |  1410次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1392次阅读
使用Inspector检查用户界面 1年以前  |  1355次阅读
JSON和序列化 1年以前  |  1269次阅读
Flutter框架概览 1年以前  |  1228次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1221次阅读
为Flutter应用程序添加交互 1年以前  |  1182次阅读
使用自定义字体 1年以前  |  1169次阅读
Flutter for Web详细介绍 1年以前  |  1116次阅读
处理文本输入 1年以前  |  1069次阅读
Flutter路由详解 1年以前  |  1067次阅读
使用包来开发Flutter应用 1年以前  |  1004次阅读
发布Flutter开发的Android程序 1年以前  |  1002次阅读
编写国际化Flutter App 1年以前  |  979次阅读