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

flutter_expandable_fab是一个能够动画显示和隐藏多个操作按钮的速度拨号FAB（浮动操作按钮）。它可以配置为垂直、水平或扇形方式显示，位于任意一侧，并允许精细的自定义。

快速开始

添加依赖

首先，在你的pubspec.yaml文件中添加flutter_expandable_fab作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_expandable_fab: ^2.0.0 # 请检查最新版本

然后运行flutter pub get来安装依赖。

基本用法

以下是一个简单的例子，展示了如何在应用中使用ExpandableFab:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expandable FAB Example'),
        ),
        body: Center(
          child: Text('Press the floating action button!'),
        ),
        floatingActionButtonLocation: ExpandableFab.location,
        floatingActionButton: ExpandableFab(
          children: [
            FloatingActionButton.small(
              heroTag: null,
              child: Icon(Icons.edit),
              onPressed: () {},
            ),
            FloatingActionButton.small(
              heroTag: null,
              child: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

自定义打开/关闭按钮

你可以通过设置openButtonBuilder和closeButtonBuilder来自定义打开和关闭按钮。例如：

ExpandableFab(
  openButtonBuilder: RotateFloatingActionButtonBuilder(
    child: Icon(Icons.account_box),
    fabSize: ExpandableFabSize.regular,
    foregroundColor: Colors.amber,
    backgroundColor: Colors.green,
    shape: CircleBorder(),
  ),
  closeButtonBuilder: DefaultFloatingActionButtonBuilder(
    child: Icon(Icons.close),
    fabSize: ExpandableFabSize.small,
    foregroundColor: Colors.deepOrangeAccent,
    backgroundColor: Colors.lightGreen,
    shape: CircleBorder(),
  ),
  children: [
    // 子按钮
  ],
)

打开/关闭菜单

如果你需要程序化地控制菜单的打开和关闭，可以使用GlobalKey<ExpandableFabState>来获取状态并调用toggle()方法：

final _key = GlobalKey<ExpandableFabState>();

// ...

floatingActionButton: ExpandableFab(
  key: _key,
  children: [
    FloatingActionButton.small(
      child: Icon(Icons.edit),
      onPressed: () {
        final state = _key.currentState;
        if (state != null) {
          debugPrint('isOpen:${state.isOpen}');
          state.toggle();
        }
      },
    ),
  ],
),

更多属性

ExpandableFab提供了许多其他属性用于进一步定制其行为和外观，如distance, duration, fanAngle, type, pos, overlayStyle等。具体可以参考官方文档中的Properties部分。

完整示例

这里提供一个更完整的示例，结合了上述所有特性：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  final _key = GlobalKey<ExpandableFabState>();
  final scaffoldKey = GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: Center(
        child: Text('Press the floating action button!'),
      ),
      floatingActionButtonLocation: ExpandableFab.location,
      floatingActionButton: ExpandableFab(
        key: _key,
        distance: 100,
        duration: Duration(milliseconds: 300),
        type: ExpandableFabType.up,
        pos: ExpandableFabPos.right,
        fanAngle: 90,
        overlayStyle: ExpandableFabOverlayStyle(
          color: Colors.black.withOpacity(0.5),
          blur: 5,
        ),
        onOpen: () => debugPrint('onOpen'),
        afterOpen: () => debugPrint('afterOpen'),
        onClose: () => debugPrint('onClose'),
        afterClose: () => debugPrint('afterClose'),
        openButtonBuilder: RotateFloatingActionButtonBuilder(
          child: Icon(Icons.add),
          fabSize: ExpandableFabSize.regular,
          foregroundColor: Colors.white,
          backgroundColor: Colors.blue,
          shape: CircleBorder(),
        ),
        closeButtonBuilder: DefaultFloatingActionButtonBuilder(
          child: Icon(Icons.close),
          fabSize: ExpandableFabSize.small,
          foregroundColor: Colors.white,
          backgroundColor: Colors.red,
          shape: CircleBorder(),
        ),
        children: [
          FloatingActionButton.small(
            heroTag: null,
            child: Icon(Icons.edit),
            onPressed: () {
              scaffoldKey.currentState?.showSnackBar(SnackBar(content: Text("Edit")));
            },
          ),
          FloatingActionButton.small(
            heroTag: null,
            child: Icon(Icons.search),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (_) => NextPage()));
            },
          ),
          FloatingActionButton.small(
            heroTag: null,
            child: Icon(Icons.share),
            onPressed: () {
              final state = _key.currentState;
              if (state != null) {
                debugPrint('isOpen:${state.isOpen}');
                state.toggle();
              }
            },
          ),
        ],
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Page')),
      body: Center(child: Text('This is the next page.')),
    );
  }
}

这个例子展示了如何创建一个带有三个子按钮的可扩展浮动操作按钮，这些子按钮分别执行编辑、搜索和分享功能。同时，它还演示了如何通过点击主按钮来打开/关闭菜单以及导航到新页面的功能。