Flutter Draggable Menu 插件 `draggable_menu` 使用指南

简介

draggable_menu 是一个用于创建可拖拽菜单的 Flutter 插件，灵感来源于流行的社交媒体平台如 Instagram、Snapchat、Facebook、Twitter 和 YouTube。该插件提供了高度可定制的 UI、动画和层级（阈值），使你可以轻松地创建自己的可拖拽菜单。

主要特性

易于使用和自定义
完全可定制的 UI
可扩展的层级支持
支持通过控制器控制菜单
兼容滚动视图
快速拖动手势支持
多种监听器支持
包含预构建的 UI 和路由

快速开始

创建一个可拖拽菜单

首先，创建一个 DraggableMenu 小部件并传递你的子小部件到其 child 参数中：

DraggableMenu(
  child: child,
)

打开可拖拽菜单

使用 DraggableMenu.open() 方法打开菜单：

DraggableMenu.open(
  context,
  DraggableMenu(
    child: child,
  ),
)

你也可以在另一个小部件内创建一个 DraggableMenu 并将其传递给 open 方法：

DraggableMenu.open(
  context,
  MyCustomDraggableMenu(),
)

注意：DraggableMenu.open() 需要一个 Navigator 来推送菜单。

如果你想编程方式关闭菜单，可以调用 Navigator.pop(context)：

Navigator.pop(context);

参数详解

以下是 DraggableMenu 的一些重要参数：

类别	参数	描述
使用	allowToShrink	是否允许缩小，默认为 `false`
使用	levels	定义菜单的层级，至少需要两个层级才能启用展开功能
使用	closeThreshold	关闭阈值，默认为 `0.5`
使用	expandThreshold	展开阈值，默认为 `1 / 3`
使用	minimizeThreshold	最小化阈值，默认为 `1 / 3`
使用	blockMenuClosing	是否阻止菜单通过拖动或点击外部区域关闭，默认为 `false`
使用	fastDrag	是否启用快速拖动手势，默认为 `true`
UI	child	添加到可拖拽菜单中的子小部件
UI	ui	覆盖默认的经典 UI 样式
监听器	addStatusListener	监听菜单的状态变化
监听器	addValueListener	监听菜单的值变化

更多参数详情请参考 GitHub Repository。

示例 Demo

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  void _openDraggableMenu(BuildContext context) {
    DraggableMenu.open(
      context,
      DraggableMenu(
        ui: ClassicDraggableMenu(), // 使用经典 UI
        levels: [
          DraggableMenuLevel(height: 240), // 定义 Level 0 的高度
          DraggableMenuLevel(height: 400), // 定义 Level 1 的高度
        ],
        child: Center(
          child: Text('This is a draggable menu!'),
        ),
      ),
      barrier: true, // 使用遮罩层
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Menu Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _openDraggableMenu(context),
          child: Text('Open Draggable Menu'),
        ),
      ),
    );
  }
}

示例说明：

UI 自定义：你可以选择不同的预设 UI 或者自定义自己的 UI。
层级设置：通过 levels 参数定义菜单的不同层级。
事件监听：可以通过 addStatusListener 和 addValueListener 监听菜单的状态和值变化。

更多详细示例可以参考 Draggable Menu Example 应用程序。

希望这些信息能帮助你更好地理解和使用 draggable_menu 插件！如果你喜欢这个插件，请不要忘记在 GitHub 上给它一个 Star，并在 pub.dev 上点赞支持。

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

songsunli 1楼•1 天前

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

当然，下面是一个关于如何在Flutter中使用draggable_menu插件来实现可拖拽菜单的示例代码。假设你已经将draggable_menu插件添加到了你的pubspec.yaml文件中：

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

然后运行flutter pub get来安装插件。

接下来，你可以创建一个简单的Flutter应用来展示如何使用draggable_menu。以下是一个完整的示例代码：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<DraggableMenuItem> _menuItems = [
    DraggableMenuItem(
      icon: Icons.home,
      title: 'Home',
      onTap: () {
        print('Home tapped');
      },
    ),
    DraggableMenuItem(
      icon: Icons.settings,
      title: 'Settings',
      onTap: () {
        print('Settings tapped');
      },
    ),
    DraggableMenuItem(
      icon: Icons.profile,
      title: 'Profile',
      onTap: () {
        print('Profile tapped');
      },
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Menu Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DraggableMenu(
              menuItems: _menuItems,
              onDragEnd: (int index, Offset offset) {
                // 处理拖拽结束事件
                print('Dragged item at index $index to $offset');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 添加一个新的菜单项
                setState(() {
                  _menuItems.add(DraggableMenuItem(
                    icon: Icons.add,
                    title: 'New Item',
                    onTap: () {
                      print('New Item tapped');
                    },
                  ));
                });
              },
              child: Text('Add New Menu Item'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

依赖项：确保在pubspec.yaml中添加了draggable_menu依赖。
数据模型：_menuItems列表包含了菜单项的数据，每个菜单项都是一个DraggableMenuItem对象。
UI布局：
- 使用DraggableMenu小部件来显示可拖拽的菜单。
- 菜单项被定义在_menuItems列表中，每个菜单项都有一个图标、标题和一个点击事件处理函数。
- 拖拽结束时，会打印拖拽的索引和位置。
动态添加菜单项：通过点击按钮，可以向菜单中添加新的菜单项。

这个示例展示了如何使用draggable_menu插件来创建一个简单的可拖拽菜单，并处理拖拽结束事件和动态添加菜单项。你可以根据自己的需求进一步自定义和扩展这个示例。

Flutter可拖拽菜单插件draggable_menu的使用

Flutter Draggable Menu 插件 draggable_menu 使用指南

简介