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

发布于 1周前 作者 ionicwang 来自 Flutter

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

全展开浮动操作按钮 (Full Expandable FAB)

一个用于展示带有动画效果的浮动操作按钮的组件，该按钮可以展开成一个模态窗口。

安装

在你的 pubspec.yaml 文件中添加 full_expandable_fab 依赖：

dependencies:
  flutter:
    sdk: flutter
  full_expandable_fab: version

API 参考

属性 (Props)

名称 类型 描述
child Widget 必填。要包裹的子组件。建议使用 Scaffold。
innerChild Widget 必填。要在展开的模态窗口中显示的组件。
icon Icon 必填。初始浮动按钮上使用的图标。
closeIconColor Color 关闭图标颜色，默认为白色。
buttonBackgroundColor Color 浮动操作按钮的背景颜色，默认为主题的主要颜色。
backgroundColor Color 展开模态窗口的背景颜色，默认为半透明黑色（Color.fromRGBO(0, 0, 0, 0.5)）。
duration Duration 动画持续时间，默认为250毫秒。

示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  final GlobalKey<ExpandableFabState> keyFab = GlobalKey<ExpandableFabState>();

  MyHomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ExpandableFab(
      key: keyFab,
      backgroundColor: Colors.white,
      closeIconColor: Colors.black,
      duration: const Duration(milliseconds: 500),
      innerChild: Column(
        children: [
          const Text('Inner widget'),
          const TextField(),
          ElevatedButton(
            onPressed: () {
              keyFab.currentState?.close();
            }, 
            child: const Text('Close me')
          )
        ],
      ),
      icon: const Icon(Icons.plus_one, color: Colors.white,),
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: const Center(
          child: Text(
            'Hello, World!',
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用 full_expandable_fab 插件的 Flutter 代码示例。full_expandable_fab 是一个用于实现可扩展浮动操作按钮（FAB）的 Flutter 插件。这个插件允许你创建一个主 FAB，并在点击时展开显示多个子按钮。

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

dependencies:
  flutter:
    sdk: flutter
  full_expandable_fab: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例，展示了如何使用 full_expandable_fab：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Full Expandable FAB Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Full Expandable FAB Demo'),
        ),
        body: Center(
          child: Text('Click the FAB to expand it!'),
        ),
        floatingActionButton: ExpandableFab(
          // 主按钮的图标
          icon: Icons.add,
          // 主按钮的背景颜色
          backgroundColor: Colors.blue,
          // 主按钮点击时的回调
          onPressed: () {},
          // 子按钮列表
          actions: [
            ExpandableFabAction(
              iconData: Icons.star,
              label: 'Favorite',
              onPressed: () {
                // 子按钮点击时的回调
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Favorite pressed')),
                );
              },
            ),
            ExpandableFabAction(
              iconData: Icons.share,
              label: 'Share',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Share pressed')),
                );
              },
            ),
            ExpandableFabAction(
              iconData: Icons.delete,
              label: 'Delete',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Delete pressed')),
                );
              },
            ),
          ],
          // 子按钮的背景颜色
          actionBackgroundColor: Colors.grey[300]!,
          // 子按钮图标的颜色
          actionIconColor: Colors.black,
          // 子按钮标签的颜色
          actionLabelColor: Colors.black,
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的 Flutter 应用，包含一个主屏幕。
  2. 使用 Scaffold 小部件来定义应用的主体和浮动操作按钮。
  3. ExpandableFab 小部件用于创建可扩展的 FAB。
  4. actions 属性是一个 ExpandableFabAction 小部件的列表，每个小部件代表一个子按钮。
  5. 每个子按钮都有一个图标、标签和一个点击回调。

你可以根据需要自定义图标、标签、颜色和其他属性。运行这个示例应用，点击主 FAB，你将看到它展开显示多个子按钮。

回到顶部