Flutter快速操作菜单插件speed_dial_fab的使用

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

Flutter快速操作菜单插件speed_dial_fab的使用

简介

Speed Dial - Float Action Button 是一个Flutter插件,用于创建带有子按钮的浮动操作按钮(FAB)。通过该插件可以方便地实现类似Google Material Design中的速拨菜单效果。当前版本可以在Pub上找到。

演示图

使用方法

添加依赖

首先,在项目的pubspec.yaml文件中添加对speed_dial_fab的依赖:

dependencies:
  flutter:
    sdk: flutter
  speed_dial_fab: ^最新版本号 # 请替换为实际的版本号

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

导入库并使用组件

在需要使用的地方导入库,并创建SpeedDialFabWidget实例。下面是一个完整的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[700],
      floatingActionButton: SpeedDialFabWidget(
        // 主按钮背景颜色
        primaryBackgroundColor: Colors.grey[900],
        // 主按钮前景颜色
        primaryForegroundColor: Colors.grey[100],
        // 子按钮图标列表
        secondaryIconsList: [
          Icons.content_copy,
          Icons.content_paste,
          Icons.content_cut,
        ],
        // 子按钮文字提示
        secondaryIconsText: [
          "复制",
          "粘贴",
          "剪切",
        ],
        // 子按钮点击事件回调函数列表
        secondaryIconsOnPress: [
          () => print("Copy"),
          () => print("Paste"),
          () => print("Cut"),
        ],
        // 子按钮背景颜色
        secondaryBackgroundColor: Colors.grey[900],
        // 子按钮前景颜色
        secondaryForegroundColor: Colors.grey[100],
      ),
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Center(
          child: Text(
            "测试Speed Dial FAB示例",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

属性说明

  • primaryBackgroundColor: 设置主FAB按钮的背景色,默认为白色。
  • primaryForegroundColor: 设置主FAB按钮的前景色,默认为黑色。
  • secondaryBackgroundColor: 设置次级FAB按钮的背景色,默认为白色。
  • secondaryForegroundColor: 设置次级FAB按钮的前景色,默认为黑色。
  • secondaryIconsList: 必填项,设置次级FAB按钮显示的图标列表。
  • secondaryIconsOnPress: 必填项,设置次级FAB按钮被点击时触发的方法列表。
  • secondaryIconsText: 可选参数,设置次级FAB按钮上的文本提示,默认无提示。
  • primaryIconExpand: 设置主FAB展开时显示的图标,默认为Icons.expand_less
  • primaryIconCollapse: 设置主FAB收起时显示的图标,默认为Icons.expand_less
  • rotateAngle: 设置主FAB点击后的旋转角度,默认为180度。

状态管理函数

  • forceExpandSecondaryFab: 强制展开次级FAB动画,谨慎使用以免破坏动画效果。
  • forceCollapseSecondaryFab: 强制收起次级FAB动画,同样需谨慎使用。

以上就是关于speed_dial_fab插件的基本介绍和用法示例,如果有任何问题或建议,请随时提出!


更多关于Flutter快速操作菜单插件speed_dial_fab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter快速操作菜单插件speed_dial_fab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用speed_dial_fab插件来创建一个快速操作菜单的示例代码。speed_dial_fab是一个非常流行的Flutter插件,用于实现带有浮动操作按钮(FAB)和多个操作项的菜单。

首先,你需要在你的pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  speed_dial: ^3.0.5+1  # 确保使用最新版本,版本号可能会更新

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

接下来,在你的Flutter项目的Dart文件中(例如main.dart),你可以使用以下代码来实现带有快速操作菜单的FAB:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Speed Dial FAB Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int activeIconIndex = 0;

  void onFabPressed() {
    print("FAB pressed!");
  }

  void onMenuItemPressed(int index) {
    setState(() {
      activeIconIndex = index;
    });
    print("Menu item $index pressed!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Speed Dial FAB Example'),
      ),
      body: Center(
        child: Text('Tap the FAB to open the menu!'),
      ),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        activeIconIndex: activeIconIndex,
        children: [
          SpeedDialChild(
            child: Icon(Icons.add),
            backgroundColor: Colors.red,
            label: 'Add',
            labelStyle: TextStyle(fontSize: 18),
            onPressed: () => onMenuItemPressed(0),
          ),
          SpeedDialChild(
            child: Icon(Icons.edit),
            backgroundColor: Colors.green,
            label: 'Edit',
            labelStyle: TextStyle(fontSize: 18),
            onPressed: () => onMenuItemPressed(1),
          ),
          SpeedDialChild(
            child: Icon(Icons.delete),
            backgroundColor: Colors.blue,
            label: 'Delete',
            labelStyle: TextStyle(fontSize: 18),
            onPressed: () => onMenuItemPressed(2),
          ),
        ],
        onOpen: () => print('Speed dial opened'),
        onClose: () => print('Speed dial closed'),
        direction: SpeedDialDirection.left,
        fabLocation: SpeedDialFabLocation.center,
        overlayColor: Colors.black.withOpacity(0.5),
        fabOpenIcon: AnimatedIcons.menu_open,
        fabClosedIcon: Icons.add,
        mainButton: FloatingActionButton(
          child: Icon(activeIconIndex == 0
              ? Icons.close
              : Icons.add),
          backgroundColor: Theme.of(context).primaryColor,
          onPressed: onFabPressed,
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个带有三个菜单项的FAB。当用户点击FAB时,会显示一个包含三个选项的菜单(添加、编辑、删除)。每个菜单项点击时,都会在控制台中打印相应的信息。

主要组件说明:

  • SpeedDial:主组件,用于创建快速操作菜单。
  • SpeedDialChild:菜单项,每个子项包含一个图标、背景颜色、标签和点击事件。
  • FloatingActionButton:作为FAB的主要按钮,当用户点击它时,可以打开或关闭菜单。

这个示例展示了如何使用speed_dial_fab插件来实现一个带有快速操作菜单的FAB。你可以根据需要进一步自定义和扩展这个示例。

回到顶部