前语

Flutter 自带的 FloatingActionButton 为咱们供给了一个悬浮在顶部的按钮，这个按钮一直在最顶层，因而能够做一些方便的操作。比如，翻滚列表时点击该按钮回到顶部。然而，假如咱们有多个操作需求悬浮在顶部的时分，一个 FloatingActionButton 就不够了。这个时分也不适合将多个按钮一起悬浮在页面顶部，那就需求点开一个 FloatingActionButton 再弹出更多操作来。这个完成还挺杂乱的，不过现已有人帮咱们搞定了。这便是增强版的 FloatingActionButton —— SpeedDial 组件，组件地址：flutter_speed_dial。下面是SpeedDial组件的官方示例运转效果。

SpeedDial 运用

在运用 FloatignActionButton 的地方就能够直接运用 SpeedDial 替换。所不同的是，SpeedDial 有一个 children 属性，能够增加多个SpeedDialChild组件作为点击 SpeedDial 弹出的更多操作。一起，SpeedDial 还供给了许多个性化的参数。SpeedDial的参数许多，这儿不一一列举了，咱们挑几个重要的参数阐明一下。其他参数我们能够看一下源码， SpeedDial的源码注释得十分好。

  • overlayColor：点击后弹出的蒙层色彩。
  • overlayOpacity：点击后弹出的蒙层透明度。例如，假如要黑色半透明，那么需求将 overlayColor 设置为黑色，然后overlayOpacity设置为0.5。
  • icon：按钮的图标，能够用 icon 来设置图标按钮。当然也能够运用child 参数设置自定义的样式。
  • activeIcon：打开后的图标，用来区别当前按钮活泼的状态。
  • buttonSize：按钮的宽高尺度；
  • childrenButtonSize：打开按钮的宽高尺度；
  • direction：打开按钮的方向，能够从左边、右侧、上侧或下侧打开操作按钮；
  • spaceBetweenChildren：打开按钮之间的距离（默认距离外能够额外增加的距离）；
  • visible：是否可见，假如翻滚时要躲藏 SpeedDial，那么能够在翻滚过程中设置 visible 为 false；
  • children：SpeedDialChild数组，用于包裹打开后的按钮。

SpeedDialChild 运用比较简单，通常是用图标作为其子组件，也支持增加文字标签阐明按钮的功用，这儿不再赘述。

咱们来看 SpeedDial 的一个实践比如，在 Scaffold 的 floatingActionButton 运用 SpeedDial 替换 FloatingActionButton，然后便是装备 SpeedDial 的参数和呼应方法了，SpeedDial 部分源码如下，其中_speedDialDirection用于操控打开按钮出现的方向，

floatingActionButton: SpeedDial(
  overlayColor: Colors.black,
  overlayOpacity: 0.5,
  icon: Icons.rocket,
  elevation: 4.0,
  buttonSize: const Size(44, 44),
  childrenButtonSize: Size(_childButtonSize, _childButtonSize),
  animationAngle: -pi / 4, // 图标的旋转角度，和图标自身的朝向没关系
  activeIcon: Icons.rocket_launch,
  direction: _speedDialDirection,
  spaceBetweenChildren: 4.0,
  spacing: 4.0,
  children: [
    SpeedDialChild(
      child: const Icon(Icons.add),
      backgroundColor: Colors.green,
      foregroundColor: Colors.white,
      onTap: () {},
    ),
    SpeedDialChild(
      child: const Icon(Icons.settings),
      backgroundColor: Colors.orange[300],
      foregroundColor: Colors.white,
      onTap: () {},
    ),
    SpeedDialChild(
      child: const Icon(Icons.person),
      backgroundColor: Colors.purple[300],
      foregroundColor: Colors.white,
      onTap: () {},
    ),
  ],
),

运转效果如下。

Flutter 增强版的页面悬浮按钮（FloatingActionButton）

总结

能够看到，SpeedDial 的运用是十分简单的，并且供给了十分丰富的个性化装备参数。关于需求点击悬浮按钮打开更多操作的场景来说，是一个能够直接拿来就用的组件。平常，我们也能够多淘淘这样的组件，到了用得上的时分就能够省时省力了。

我是岛上码农，微信大众号同名。如有问题能够加本人微信交流，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

：保藏文章，方便回看哦！

：评论交流，互相进步！