Flutter浮动操作按钮菜单插件hawk_fab_menu的使用

hawk_fab_menu 是一个可自定义的浮动操作按钮（FAB）菜单插件，它可以在界面上弹出多个小的FAB，为用户提供更多的操作选项。以下是关于如何使用这个插件的详细说明。

简单示例

自定义示例

注意事项

• 欢迎提交Pull Requests (PRs)
• 如果有任何问题，请在 GitHub 上提出Issue。
• 开放接受建议 ❤️

示例代码

下面是一个完整的示例Demo，展示了如何在Flutter项目中使用 hawk_fab_menu 插件：

import 'package:flutter/material.dart';
import 'package:hawk_fab_menu/hawk_fab_menu.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hawk Fab Menu Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

/// StatefulWidget is used only for HawkFabMenuController which is used
/// to toggle the menu from other than dedicated button. If you don't have this
/// usecase, then you can even use StatelessWidget.
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  HawkFabMenuController hawkFabMenuController = HawkFabMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hawk Fab Menu Demo'),
        actions: [
          IconButton(
            onPressed: () {
              hawkFabMenuController.toggleMenu();
            },
            icon: const Icon(Icons.replay_outlined),
          ),
        ],
      ),
      body: HawkFabMenu(
        icon: AnimatedIcons.menu_arrow,
        fabColor: Colors.yellow,
        iconColor: Colors.green,
        hawkFabMenuController: hawkFabMenuController,
        items: [
          HawkFabMenuItem(
            label: 'Menu 1',
            ontap: () {
              ScaffoldMessenger.of(context).hideCurrentSnackBar();
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Menu 1 selected')),
              );
            },
            icon: const Icon(Icons.home),
            color: Colors.red,
            labelColor: Colors.blue,
          ),
          HawkFabMenuItem(
            label: 'Menu 2',
            ontap: () {
              ScaffoldMessenger.of(context).hideCurrentSnackBar();
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Menu 2 selected')),
              );
            },
            icon: const Icon(Icons.comment),
            labelColor: Colors.white,
            labelBackgroundColor: Colors.blue,
          ),
          HawkFabMenuItem(
            label: 'Menu 3 (default)',
            ontap: () {
              ScaffoldMessenger.of(context).hideCurrentSnackBar();
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Menu 3 selected')),
              );
            },
            icon: const Icon(Icons.add_a_photo),
          ),
        ],
        body: const Center(
          child: Text('Center of the screen'),
        ),
      ),
    );
  }
}

关键点解释

1. 引入依赖：确保在 pubspec.yaml 文件中添加了 hawk_fab_menu 依赖。

   dependencies:
     hawk_fab_menu: ^latest_version
   

2. 创建控制器：使用 HawkFabMenuController 来控制菜单的显示和隐藏。如果不需要从其他地方触发菜单切换，可以不使用 StatefulWidget。

3. 配置菜单项：通过 items 参数配置菜单项，每个菜单项可以通过 HawkFabMenuItem 构建，并设置相应的图标、颜色、标签等属性。

4. 交互处理：为每个菜单项设置点击事件 ontap，可以根据需要执行不同的操作，如显示Snackbar、导航到新页面等。

通过以上步骤，你就可以在Flutter应用中轻松集成并使用 hawk_fab_menu 插件了。希望这个示例能帮助你快速上手！如果有任何问题或需要进一步的帮助，请随时联系我。