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

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

安装

只需将 expendable_fab 添加到您的 pubspec.yaml 文件中：

dependencies:
  expendable_fab: ^0.0.1

示例

以下是一个完整的示例代码，展示了如何在应用中使用 ExpendableFab 插件。

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

// 主应用类
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个全局的ScaffoldState键
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldkey,
        appBar: AppBar(
          title: const Text('Expendable Floating Fab Example'),
        ),
        body: Center(
          child: Text('点击右下角浮动按钮以展开更多选项'),
        ),
        // 使用ExpendableFab作为浮动操作按钮
        floatingActionButton: ExpendableFab(
          distance: 2.0, // 设置按钮距离底部和右侧的距离
          children: [
            ActionButton(
              onPressed: () => toast(context, 'balance'), // 点击事件
              icon: const Icon(Icons.account_balance), // 图标
            ),
            ActionButton(
              onPressed: () => toast(context, 'money'),
              icon: const Icon(Icons.money),
            ),
            ActionButton(
              onPressed: () => toast(context, 'credit card'),
              icon: const Icon(Icons.credit_card),
            ),
            ActionButton(
              onPressed: () => toast(context, 'file copy'),
              icon: const Icon(Icons.file_copy),
            ),
          ],
        ),
      ),
    );
  }

  // 显示提示信息的方法
  toast(BuildContext context, String action) {
    _scaffoldkey.currentState?.showSnackBar(
      SnackBar(content: Text("选择了 $action")),
    );
  }
}

更多关于Flutter可扩展浮动操作按钮插件expendable_fab的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可扩展浮动操作按钮插件expendable_fab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


expandable_fab 是一个用于 Flutter 的插件，它允许你创建一个可以扩展的浮动操作按钮（Floating Action Button, FAB）。这个插件非常适合需要在一个按钮上展示多个操作选项的场景。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 expandable_fab 依赖：

dependencies:
  flutter:
    sdk: flutter
  expandable_fab: ^1.0.0  # 请查看最新版本

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

使用 ExpandableFab

下面是一个简单的示例，展示了如何使用 ExpandableFab：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expandable FAB Example'),
        ),
        body: Center(
          child: Text('Press the FAB to expand it!'),
        ),
        floatingActionButton: ExpandableFab(
          distance: 112.0,  // 子按钮之间的距离
          children: [
            ActionButton(
              onPressed: () {
                print('Action 1 pressed');
              },
              icon: Icon(Icons.add),
              label: Text('Add'),
            ),
            ActionButton(
              onPressed: () {
                print('Action 2 pressed');
              },
              icon: Icon(Icons.edit),
              label: Text('Edit'),
            ),
            ActionButton(
              onPressed: () {
                print('Action 3 pressed');
              },
              icon: Icon(Icons.delete),
              label: Text('Delete'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • distance: 子按钮之间的距离。
  • children: 一组 ActionButton，每个 ActionButton 代表一个可扩展的子按钮。
    • onPressed: 当按钮被点击时触发的回调函数。
    • icon: 按钮的图标。
    • label: 按钮的标签。

自定义样式

你可以通过 ExpandableFab 的 icon 参数来自定义主按钮的图标，或者通过 backgroundColor 参数来设置按钮的背景颜色。

ExpandableFab(
  distance: 112.0,
  icon: Icon(Icons.menu),
  backgroundColor: Colors.blue,
  children: [
    ActionButton(
      onPressed: () {
        print('Action 1 pressed');
      },
      icon: Icon(Icons.add),
      label: Text('Add'),
    ),
    // 其他 ActionButton
  ],
)
回到顶部