Flutter可扩展浮动操作按钮插件expandable_fab_menu的使用

简介

ExpandableFabMenu 是一个用于Flutter的可扩展浮动操作按钮插件。它可以直接替换 Scaffold.floatingActionButton 中的 FloatingActionButton 小部件。

使用方法

基本属性

• animatedIcon: 动画图标，通常是一个 AnimatedIcons 类型。
• animatedIconTheme: 动画图标的主题设置。
• child: 默认显示的图标。
• backgroundColor: 背景颜色。
• onOpen: 按钮展开时的回调函数。
• onClose: 按钮关闭时的回调函数。
• scrollVisible: 控制按钮在滚动时是否可见。
• overlayColor 和 overlayOpacity: 设置覆盖层的颜色和透明度。
• children: 子菜单项列表。

位置设置

无法通过 Scaffold.floatingActionButtonLocation 来设置位置，但可以通过 marginRight 和 marginBottom 参数（默认值为16）来调整按钮的位置。

如果使用了 Scaffold.bottomNavigationBar，浮动按钮将始终位于该栏上方，因此需要确保 BottomAppBar.hasNotch 为 false。

示例代码

以下是一个完整的示例代码，展示了如何使用 ExpandableFabMenu 插件：

import 'package:flutter/material.dart';
import 'package:expandable_fab_menu/expandable_fab_menu.dart'; // 确保导入正确的包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool scrollVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable FAB Menu Example'),
      ),
      floatingActionButton: ExpandableFabMenu(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: const IconThemeData(size: 22.0),
        child: const Icon(Icons.add),
        backgroundColor: Colors.orange,
        onOpen: () => debugPrint('OPENING DIAL'),
        onClose: () => debugPrint('DIAL CLOSED'),
        scrollVisible: scrollVisible, // 是否随滚动隐藏
        overlayColor: Colors.black,
        overlayOpacity: 0.7,
        children: [
          ExpandableFabMenuItem(
            child: const Icon(Icons.add, color: Colors.white),
            title: "Create Groups",
            titleColor: Colors.white,
            subtitle: "You Can create a new group",
            subTitleColor: Colors.white,
            backgroundColor: Colors.amber,
            onTap: () => debugPrint('FIRST CHILD'),
          ),
          ExpandableFabMenuItem(
            child: const Icon(Icons.visibility, color: Colors.white),
            title: "View Groups",
            titleColor: Colors.white,
            subtitle: "You Can view your groups",
            subTitleColor: Colors.white,
            backgroundColor: Colors.green,
            onTap: () => debugPrint('SECOND CHILD'),
          ),
          ExpandableFabMenuItem(
            child: const Icon(Icons.edit, color: Colors.white),
            title: "Edit Groups",
            titleColor: Colors.white,
            subtitle: "You Can edit a group",
            subTitleColor: Colors.white,
            backgroundColor: Colors.blue,
            onTap: () => debugPrint('THIRD CHILD'),
          ),
          ExpandableFabMenuItem(
            child: const Icon(Icons.delete, color: Colors.white),
            title: "Delete Groups",
            titleColor: Colors.white,
            subtitle: "You Can delete a group",
            subTitleColor: Colors.white,
            backgroundColor: Colors.indigo,
            onTap: () => debugPrint('FOURTH CHILD'),
          )
        ],
      ),
    );
  }
}

反馈与问题

如果有任何反馈或发现bug，请在 GitHub Issues 上提交问题。

贡献

欢迎提交pull request进行贡献。

许可证

此代码基于MIT许可证发布，版权所有 © 2019 ralphnoel13。