Flutter浮动菜单插件menu_float的使用

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

Flutter浮动菜单插件menu_float的使用

这个小部件会在点击另一个小部件(如按钮或链接)时在窗口中显示一个浮动菜单。

Menu float - example

开始使用

使用非常简单。浮动菜单接收一个泛型对象来确定点击选项后要发送的对象。

class Product {
  final String name;
  final double value;
  ...
}

final options = [
  MenuFloatOption<Product>(
    label: e.name,
    value: e,
    onClick: (Product v) {
      final n = v.name;
      print('Product is: $n');
    })
  ),
  ...
]

MenuFloat<Product>(
  items: options,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('点击我')
  ),
)

更多详情请参见项目中的演示文件夹。

属性说明:

属性 类型 描述
top boolean 定义优先打开菜单在触发器上方。
left boolean 定义优先打开菜单在触发器左侧。
right boolean 定义优先打开菜单在触发器右侧。
child Widget 触发器小部件(如ElevatedButton、Text等)。
items List<MenuFloatOption> 菜单选项。

示例代码

以下是 example/lib/main.dart 文件中的完整示例代码:

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

const double landscapeWidth = 1024;
const double landscapeHeight = 769;

void main() {
  runApp(const MenuFloatDemo());
}

class MenuFloatExampleDemo extends StatelessWidget {
  final bool top;
  final bool left;
  final bool right;
  final double x;
  final double y;

  const MenuFloatExampleDemo({
    Key? key,
    this.top = false,
    this.left = false,
    this.right = false,
    required this.x,
    required this.y,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MenuFloatExampleTestPage(
        x: x, y: y, top: top, left: left, right: right);
  }
}

/// 这是一个无状态小部件,用于创建一个浮动菜单按钮
class MenuFloatDemo extends StatelessWidget {
  const MenuFloatDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Stack(
        children: const [
          // y: 0
          MenuFloatExampleDemo(x: 0, y: 0),
          MenuFloatExampleDemo(x: 500, y: 0),
          MenuFloatExampleDemo(x: 930, y: 0),
          // y: 400
          MenuFloatExampleDemo(x: 0, y: 400),
          MenuFloatExampleDemo(x: 500, y: 400),
          MenuFloatExampleDemo(x: 930, y: 400),
          // y: 730
          MenuFloatExampleDemo(x: 0, y: 730),
          MenuFloatExampleDemo(x: 500, y: 730),
          MenuFloatExampleDemo(x: 930, y: 730),
        ],
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用menu_float插件来实现浮动菜单的一个示例代码案例。menu_float插件允许你在应用中创建和管理浮动菜单,这在需要快速访问特定功能时非常有用。

首先,确保你已经在pubspec.yaml文件中添加了menu_float依赖:

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

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

接下来,你可以在你的Flutter应用中实现浮动菜单。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:menu_float/menu_float.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: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  MenuFloatController _menuFloatController = MenuFloatController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Floating Menu Example'),
      ),
      body: Stack(
        children: [
          Center(
            child: Text(
              'Swipe from the bottom-right corner to open the menu',
              style: TextStyle(fontSize: 24),
            ),
          ),
          MenuFloat(
            controller: _menuFloatController,
            // 设置菜单项
            menuItems: [
              MenuItem(
                icon: Icons.home,
                label: 'Home',
                onTap: () {
                  // 处理点击事件
                  print('Home clicked');
                },
              ),
              MenuItem(
                icon: Icons.settings,
                label: 'Settings',
                onTap: () {
                  // 处理点击事件
                  print('Settings clicked');
                },
              ),
              MenuItem(
                icon: Icons.exit_to_app,
                label: 'Logout',
                onTap: () {
                  // 处理点击事件
                  print('Logout clicked');
                },
              ),
            ],
            // 菜单显示位置
            menuPosition: MenuPosition.bottomRight,
            // 菜单动画曲线
            menuAnimationCurve: Curves.easeInOut,
            // 菜单背景颜色
            menuBackgroundColor: Colors.white,
            // 菜单项文字颜色
            menuItemTextColor: Colors.black,
            // 菜单项文字大小
            menuItemFontSize: 18.0,
            // 菜单项图标大小
            menuItemIconSize: 24.0,
            // 菜单项图标颜色
            menuItemIconColor: Colors.black,
            // 菜单阴影
            menuElevation: 8.0,
            // 菜单打开动画时长
            menuOpenDuration: Duration(milliseconds: 300),
            // 菜单关闭动画时长
            menuCloseDuration: Duration(milliseconds: 300),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 手动打开或关闭菜单
          if (_menuFloatController.isMenuOpen) {
            _menuFloatController.closeMenu();
          } else {
            _menuFloatController.openMenu();
          }
        },
        tooltip: 'Toggle Menu',
        child: Icon(Icons.menu),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 依赖管理:在pubspec.yaml文件中添加了menu_float依赖。
  2. 创建主应用:创建了一个简单的Flutter应用,包含一个Scaffold,其中有一个AppBar和一个居中的文本提示。
  3. 添加浮动菜单:使用MenuFloat小部件来创建浮动菜单,并设置了菜单项、菜单位置、动画曲线等属性。
  4. 处理菜单项点击事件:为每个菜单项设置了onTap回调,以处理点击事件。
  5. 手动控制菜单:通过FloatingActionButton手动打开或关闭菜单。

这样,你就可以在你的Flutter应用中实现一个功能齐全的浮动菜单了。记得根据实际情况调整菜单项和样式。

回到顶部