FAB 圆形菜单
一个 Flutter 包，通过浮动操作按钮创建一个漂亮的圆形菜单。
灵感来自 Mayur Kshirsagar 的精彩 FAB 微交互设计。
安装
只需将 `fab_circular_menu` 添加到您的 pubspec.yml 文件中。
dependencies:
fab_circular_menu: ^1.0.0
示例
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Placeholder(),
floatingActionButton: FabCircularMenu(
children: <Widget>[
IconButton(icon: Icon(Icons.home), onPressed: () {
print('Home');
}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {
print('Favorite');
})
]
)
)
);
}
}
您可以在 example 目录中查看更完整的示例。
自定义
您可以使用以下属性来自定义小部件的外观
| 属性 | 描述 | 默认值 |
|---|---|---|
| alignment | 设置小部件的对齐方式 | Alignment.bottomRight |
| ringColor | 设置环的颜色 | accentColor |
| ringDiameter | 设置环的直径 | `screenWidth * 1.25`（纵向）`screenHeight * 1.25`（横向） |
| ringWidth | 设置环的宽度 | ringDiameter * 0.3 |
| fabSize | 设置 FAB 的大小 | 64.0 |
| fabElevation | 设置 FAB 的阴影 | 8.0 |
| fabColor | 设置 FAB 的颜色 | primaryColor |
| fabOpenColor | 设置菜单打开时的 FAB 颜色。此属性优先于 `fabColor` | – |
| fabCloseColor | 设置菜单关闭时的 FAB 颜色。此属性优先于 `fabColor` | – |
| fabChild | 设置 FAB 内的子部件。此属性优先于 `fabOpenicon` 和 `fabCloseIcon` | – |
| fabOpenIcon | 设置菜单打开时的 FAB 图标 | Icon(Icons.menu) |
| fabCloseIcon | 设置菜单关闭时的 FAB 图标 | Icon(Icons.close) |
| fabMargin | 设置小部件的边距 | EdgeInsets.all(16.0) |
| animationDuration | 更改动画持续时间 | Duration(milliseconds: 800) |
| animationCurve | 允许您修改动画曲线 | Curves.easeInOutCirc |
| onDisplayChange | 每次菜单打开或关闭时都会调用此回调，并将当前状态作为参数传递。 | – |
以编程方式处理菜单
可以通过使用 key 来以编程方式处理菜单。只需创建一个 key 并将其设置在 FabCircularMenu 的 key 属性中，然后使用该 key 获取当前状态并打开、关闭或检查菜单的状态。
class MyApp extends StatelessWidget {
final GlobalKey<FabCircularMenuState> fabKey = GlobalKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: RaisedButton(
onPressed: () {
if (fabKey.currentState.isOpen) {
fabKey.currentState.close();
} else {
fabKey.currentState.open();
}
},
child: Text('Toggle menu')
),
floatingActionButton: FabCircularMenu(
key: fabKey,
children: <Widget>[
// ...
]
)
)
);
}
}
贡献
如果您为本项目做出贡献，我将非常高兴，请提交 PR。？
