Flutter浮动可扩展菜单插件floating_expandable_menu的使用

Flutter浮动可扩展菜单插件floating_expandable_menu的使用

简介

floating_expandable_menu 是一个用于 Flutter 应用程序的可定制浮动和可扩展菜单小部件。该小部件非常适合为您的 Flutter 应用程序添加现代化且交互式的菜单。

特点

• 浮动菜单按钮始终位于其他小部件之上。
• 可展开以显示菜单选项。
• 菜单项完全可自定义。
• 菜单展开和折叠时具有平滑动画效果。

使用示例

以下是一个完整的示例，展示如何在 Flutter 应用程序中使用 floating_expandable_menu 插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('浮动可扩展菜单示例'),
        ),
        body: Center(
          child: Text('点击右下角的图标以查看浮动可扩展菜单'),
        ),
        floatingActionButton: FloatingExpandableMenu(
          // 定义菜单项
          menuItems: [
            FloatingMenuItem(
              iconData: Icons.add,
              onPressed: () {
                print('添加');
              },
            ),
            FloatingMenuItem(
              iconData: Icons.delete,
              onPressed: () {
                print('删除');
              },
            ),
            FloatingMenuItem(
              iconData: Icons.edit,
              onPressed: () {
                print('编辑');
              },
            ),
          ],
          // 主按钮的图标
          mainButtonIcon: Icons.menu,
          // 主按钮的颜色
          mainButtonColor: Colors.blue,
          // 菜单展开方向
          direction: ExpansionDirection.right,
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包:

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

2. 创建主应用类 MyApp:

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

3. 构建 MyApp 类:

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('浮动可扩展菜单示例'),
           ),
           body: Center(
             child: Text('点击右下角的图标以查看浮动可扩展菜单'),
           ),
           floatingActionButton: FloatingExpandableMenu(
             // 定义菜单项
             menuItems: [
               FloatingMenuItem(
                 iconData: Icons.add,
                 onPressed: () {
                   print('添加');
                 },
               ),
               FloatingMenuItem(
                 iconData: Icons.delete,
                 onPressed: () {
                   print('删除');
                 },
               ),
               FloatingMenuItem(
                 iconData: Icons.edit,
                 onPressed: () {
                   print('编辑');
                 },
               ),
             ],
             // 主按钮的图标
             mainButtonIcon: Icons.menu,
             // 主按钮的颜色
             mainButtonColor: Colors.blue,
             // 菜单展开方向
             direction: ExpansionDirection.right,
           ),
         ),
       );
     }
   }