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

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

概述

material_speed_dial 是一个简单的 Material 快速操作菜单插件。它允许用户通过一个浮动按钮来触发一系列的操作。

预览

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 material_speed_dial 依赖：

dependencies:
  material_speed_dial: 0.0.7

2. 在 Widget 树中添加

在你的应用中，你可以将 SpeedDial 添加到 Scaffold 的 floatingActionButton 属性中。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Speed Dial Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _key = GlobalKey<SpeedDialState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Speed Dial Demo'),
      ),
      floatingActionButton: SpeedDial(
        key: _key,
        invokeAfterClosing: true,
        child: Icon(Icons.add), // 浮动按钮的图标
        expandedChild: Icon(Icons.share), // 打开时的图标
        backgroundColor: Colors.blue, // 关闭状态下的背景颜色
        expandedBackgroundColor: Colors.black, // 打开状态下的背景颜色
        children: [
          SpeedDialChild(
            child: Icon(Icons.close), // 子项的图标
            label: Text('Test'), // 子项的标签
            onPressed: () {}, // 子项的点击事件
          ),
          SpeedDialChild(
            child: Icon(Icons.pending), // 子项的图标
            label: Text('Another Test'), // 子项的标签
            onPressed: () {}, // 子项的点击事件
          ),
        ],
      ),
    );
  }
}

3. 检查状态或切换

你可以通过 SpeedDialState 来检查 SpeedDial 是否打开，并且可以手动切换它的状态：

final isOpen = _key.currentState.isOpen;

// 切换状态
_key.currentState.toggle();

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用material_speed_dial插件创建快速操作菜单的示例代码。这个插件允许你创建一个悬浮的操作菜单，用户可以通过点击一个中心按钮来展开或收起菜单项。

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

dependencies:
  flutter:
    sdk: flutter
  material_speed_dial: ^4.0.0  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例代码，展示了如何在一个简单的Flutter应用中实现这个功能：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Speed Dial Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // SpeedDial widget
            SpeedDial(
              animatedIcon: AnimatedIcons.menu_close,
              animatedIconTheme: IconThemeData(size: 22),
              activeIcon: Icons.close,
              activeIconTheme: IconThemeData(color: Colors.red),
              overlayColor: Colors.black.withOpacity(0.5),
              overlayShape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              visible: true,
              curve: Curves.bounceInOut,
              directionalAnimation: true,
              children: [
                SpeedDialChild(
                  child: Icon(Icons.add),
                  backgroundColor: Colors.green,
                  label: 'Add',
                  labelStyle: TextStyle(fontSize: 18),
                  onTap: () {
                    // Handle add tap
                    print('Add tapped');
                  },
                ),
                SpeedDialChild(
                  child: Icon(Icons.edit),
                  backgroundColor: Colors.blue,
                  label: 'Edit',
                  labelStyle: TextStyle(fontSize: 18),
                  onTap: () {
                    // Handle edit tap
                    print('Edit tapped');
                  },
                ),
                SpeedDialChild(
                  child: Icon(Icons.delete),
                  backgroundColor: Colors.red,
                  label: 'Delete',
                  labelStyle: TextStyle(fontSize: 18),
                  onTap: () {
                    // Handle delete tap
                    print('Delete tapped');
                  },
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Center Button',
        child: Icon(Icons.menu),
      ), // This is just a placeholder, actual FAB is handled by SpeedDial
    );
  }
}

在这个示例中：

  1. SpeedDial是主要的快速操作菜单组件。
  2. animatedIcon属性用于设置动画图标，当用户点击中心按钮时，这个图标会进行动画切换。
  3. children属性包含了多个SpeedDialChild，每个SpeedDialChild代表菜单中的一个操作项。
  4. 每个SpeedDialChild都有child属性来设置显示的图标，backgroundColor属性来设置背景颜色，label和labelStyle属性来设置标签文本和样式，以及onTap回调来处理点击事件。

请注意，虽然示例中包含了floatingActionButton，但实际的中心按钮功能是由SpeedDial组件处理的。你可以根据需要调整SpeedDial的位置和样式。

回到顶部