[译]Flutter 强大的 FloatingActionButton 替代组件 flutter_speed_dial

590 阅读2分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」


本文翻译自: flutter_speed_dial | Flutter Package (flutter-io.cn)

译时版本: 6.2.0


Flutter Speed Dial

渲染 Material Design Speed Dial 的 Flutter 包。

flutter_speed_dial.gif

用法

该 SpeedDial 组件构建用于替换 Scaffold.floatingActionButton 的变量,代替 FloatingActionButton 组件。 可以用 Scaffold.floatingActionButtonLocation 变量设定其位置。 它也可以和  Scaffold.bottomNavigationBar 还有 Snackbar 一起使用。

空安全 从 3.0.5 开始可用 (它也是向后兼容的,这意味着也可以使用 非空安全 的代码)

标签

SpeedDial 可以接收任意组件作为 label 如果指定了 Label , SpeedDial 会使用扩展的FloatingActionButton 属性。它还有 activeLabel 属性,使用该属性,可以指定 SpeedDial 打开时要表示的标签。 它带有自己的 labelTransitionBuilder 默认是淡入淡出转换。

每个有 label 属性子按钮也都会接收 String 的参数,并可以用 labelStyle 设定样式。 如果想要指定组件的话,可以使用 labelWidget 。 如果没有提供 label 参数,标签不会被渲染。

SpeedDial 子组件的类型  (按优先度排序)

Animated Icon 用 animatedIcon 属性

SpeedDial 的 AnimatedIcon 有两个特定的参数:

  • animatedIcon 接收 AnimatedIconData 组件
  • animatedIconTheme 接收 IconThemeData

Widget 用 child 和 activeChild 属性

SpeedDial 的 Widget 有两个特定的参数:

  • child 接收一个组件,SpeedDial 没有打开时,该组件就是默认的占位组件。
  • activeChild 接收一个组件,SpeedDial 是打开的状态时,该组件就是要使用的子组件,不是必需的。

IconData 使用 icon 和 activeIcon 属性

SpeedDial 的 IconData 有三个特定的参数:

  • icon 接收一个 IconData , SpeedDial 没有打开时,该组件就是默认的点位组件。
  • activeIcon 接收一个 IconData SpeeDial是打开的状态时, 它是要使用的子组件的 IconData,不是必需的。
  • iconTheme 接收一个 IconThemeData 包含 color 和 size (颜色和大小)。

该包会自动处理动画。

处理间隔空间

有多个属性可用于调整 SpeedDial 的间隔空间:

  1. spacing - 该参数处理 SpeedDial 和 其子组件的空间。
  2. spaceBetweenChildren - 正如其名,该参数用于调整每个子组件之间的空间。
  3. childPadding - 该属性会调整子组件按钮的内边距,这有助于更高效地控制子按钮的大小。
  4. childMargin - 该属性会帮助调整子组件按钮和其标签之间的外边矩。

WillPop 时关闭

如果 SpeedDial 是打开着的,按下返回按钮时会自动关闭。 如果不想自动关闭,只需将 closeDialOnPop 的值改为 false 。

如何使用 openCloseDial 属性:

  1. 创建一个名为 isDialOpen 的 Value Notifier:
ValueNotifier<bool> isDialOpen = ValueNotifier(false);
  1. 然后在 SpeedDial 中将 openCloseDial 设置为 isDialOpen :
SpeedDial(
  ...
  openCloseDial: isDialOpen,
  ...
)
  1. 现在可以改变 SpeedDial 的状态:
isDialOpen.value = false;

示例用法

查看 示例代码 获取更多信息。

问题和反馈

请提出 issue 发送反馈或报告BUG, 如果有任何问题或想法,可以 开一个讨论。 感谢!

贡献

欢迎PR。


本文正在参加「金石计划 . 瓜分6万现金大奖」