Flutter动画菜单按钮插件animated_fab_button_menu的使用

动画FAB菜单

Animated FAB Menu 插件允许你在 Flutter 应用程序中添加一个带有动画效果的浮动操作按钮（FAB），该按钮展开时会显示一系列菜单项。

特性

FabMenu 小部件通常放置在 Scaffold.floatingActionButton 参数中，替代原有的 FloatingActionButton 小部件。其位置由 fabAlignment 属性设置，因此你无需通过 Scaffold.floatingActionButtonLocation 参数来设置位置。默认情况下，位置设置为 bottomCenter，但你可以通过 fabAlignment 属性将其放置在屏幕的任何位置。此外，你可以通过 fabIcon 和 fabBackgroundColor 属性自定义按钮的图标和颜色。

菜单

按下浮动操作按钮后，页面将以一些酷炫的动画方式打开一个包含菜单项的列表。这些菜单项可以通过 children 列表属性进行指定。每个列表中的子项需要一个 title 来表示项目名称，一个 style 来表示文本小部件的样式，以及一个 onTap 函数来处理点击事件。此外，你还可以使用 overlayColor 属性更改背景色，overlayOpacity 属性更改背景色透明度，以及 closeMenuButton 属性自定义关闭菜单按钮。

包将自行处理动画。

开始使用

步骤1：添加最新版本的包到你的 pubspec.yaml 文件中（并运行 dart pub get）：

dependencies:
  animated_fab_button_menu: ^0.0.2

步骤2：导入包并在你的 Flutter 应用程序中使用它：

import 'package:animated_fab_button_menu/animated_fab_button_menu.dart';

使用方法

你可以修改以下属性：

• fabIcon
• fabBackgroundColor
• fabAlignment
• overlayColor（菜单背景颜色）
• overlayOpacity（菜单背景颜色透明度）
• elevation
• closeMenuButton（关闭菜单按钮）
• children（菜单项）
• title（子菜单项名称）
• style（子菜单项文本样式）
• onTap（子菜单项点击函数）

示例使用（包含所有参数）：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FabMenu(
          fabBackgroundColor: Colors.amber,
          elevation: 2.0,
          fabAlignment: Alignment.bottomCenter,
          fabIcon: const Icon(Icons.more_horiz),
          closeMenuButton: const Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          overlayOpacity: 0.5,
          overlayColor: Colors.amber,
          children: [
            MenuItem(
              title: '首页',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '个人资料',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '消息',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '反馈',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '设置',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '分享',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: '联系我们！',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
          ]),
      body: const Center(
        child: Text('Flutter 动画FAB菜单'),
      ),
    );
  }
}