本文正在参加「金石计划 . 瓜分6万现金大奖」
本文翻译自: flutter_speed_dial | Flutter Package (flutter-io.cn)
译时版本: 6.2.0
Flutter Speed Dial
渲染 Material Design Speed Dial 的 Flutter 包。
用法
该 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接收一个IconDataSpeeDial是打开的状态时, 它是要使用的子组件的 IconData,不是必需的。iconTheme接收一个IconThemeData包含 color 和 size (颜色和大小)。
该包会自动处理动画。
处理间隔空间
有多个属性可用于调整 SpeedDial 的间隔空间:
spacing- 该参数处理 SpeedDial 和 其子组件的空间。spaceBetweenChildren- 正如其名,该参数用于调整每个子组件之间的空间。childPadding- 该属性会调整子组件按钮的内边距,这有助于更高效地控制子按钮的大小。childMargin- 该属性会帮助调整子组件按钮和其标签之间的外边矩。
WillPop 时关闭
如果 SpeedDial 是打开着的,按下返回按钮时会自动关闭。
如果不想自动关闭,只需将 closeDialOnPop 的值改为 false 。
如何使用 openCloseDial 属性:
- 创建一个名为
isDialOpen的 Value Notifier:
ValueNotifier<bool> isDialOpen = ValueNotifier(false);
- 然后在
SpeedDial中将openCloseDial设置为isDialOpen:
SpeedDial(
...
openCloseDial: isDialOpen,
...
)
- 现在可以改变 SpeedDial 的状态:
isDialOpen.value = false;
示例用法
查看 示例代码 获取更多信息。
问题和反馈
请提出 issue 发送反馈或报告BUG, 如果有任何问题或想法,可以 开一个讨论。 感谢!
贡献
欢迎PR。
本文正在参加「金石计划 . 瓜分6万现金大奖」