w_popup_menu 是一个用于在 Flutter 应用中创建弹出菜单的插件。它提供了简单易用的 API，可以帮助你快速实现自定义的弹出菜单。以下是如何使用 w_popup_menu 插件的详细步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  w_popup_menu: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 w_popup_menu 包：

import 'package:w_popup_menu/w_popup_menu.dart';

3. 使用 WPopupMenu

WPopupMenu 是一个可以附加到任何小部件上的弹出菜单。你可以通过 WPopupMenu 来显示一个自定义的菜单。

基本用法

以下是一个简单的示例，展示如何使用 WPopupMenu：

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

class PopupMenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popup Menu Example'),
      ),
      body: Center(
        child: WPopupMenu(
          child: Text('Show Menu'),
          menu: Column(
            children: [
              WPopupMenuItem(
                child: Text('Item 1'),
                onTap: () {
                  print('Item 1 clicked');
                },
              ),
              WPopupMenuItem(
                child: Text('Item 2'),
                onTap: () {
                  print('Item 2 clicked');
                },
              ),
              WPopupMenuItem(
                child: Text('Item 3'),
                onTap: () {
                  print('Item 3 clicked');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: PopupMenuExample(),
));

自定义菜单项

你可以通过 WPopupMenuItem 自定义菜单项的内容和样式。WPopupMenuItem 的 child 属性可以接受任何小部件，因此你可以根据需要自定义菜单项的外观。

WPopupMenuItem(
  child: Container(
    padding: EdgeInsets.all(10),
    color: Colors.blue,
    child: Text(
      'Custom Item',
      style: TextStyle(color: Colors.white),
    ),
  ),
  onTap: () {
    print('Custom Item clicked');
  },
),

控制菜单的显示和隐藏

你可以通过 WPopupMenuController 来控制菜单的显示和隐藏。首先，创建一个 WPopupMenuController 实例，然后将其传递给 WPopupMenu 的 controller 属性。

class PopupMenuExample extends StatefulWidget {
  @override
  _PopupMenuExampleState createState() => _PopupMenuExampleState();
}

class _PopupMenuExampleState extends State<PopupMenuExample> {
  final WPopupMenuController _controller = WPopupMenuController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popup Menu Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WPopupMenu(
              controller: _controller,
              child: Text('Show Menu'),
              menu: Column(
                children: [
                  WPopupMenuItem(
                    child: Text('Item 1'),
                    onTap: () {
                      print('Item 1 clicked');
                    },
                  ),
                  WPopupMenuItem(
                    child: Text('Item 2'),
                    onTap: () {
                      print('Item 2 clicked');
                    },
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _controller.show();
              },
              child: Text('Show Menu Programmatically'),
            ),
            ElevatedButton(
              onPressed: () {
                _controller.hide();
              },
              child: Text('Hide Menu Programmatically'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 其他配置

WPopupMenu 还提供了其他一些配置选项，例如：

• offset: 控制菜单相对于触发点的偏移量。
• barrierColor: 设置菜单背景遮罩的颜色。
• barrierDismissible: 控制是否可以通过点击遮罩来关闭菜单。

WPopupMenu(
  offset: Offset(0, 10),
  barrierColor: Colors.black.withOpacity(0.5),
  barrierDismissible: true,
  child: Text('Show Menu'),
  menu: Column(
    children: [
      WPopupMenuItem(
        child: Text('Item 1'),
        onTap: () {
          print('Item 1 clicked');
        },
      ),
      WPopupMenuItem(
        child: Text('Item 2'),
        onTap: () {
          print('Item 2 clicked');
        },
      ),
    ],
  ),
),