Flutter中如何用多个按钮统一控制同一菜单的显示与隐藏？

我希望在应用不同位置通过多个按钮打开/关闭同一个菜单，但目前菜单表现不一致。点击菜单区域外可以正常关闭菜单，但点击其他控制按钮时也会触发这个“点击外部关闭”的逻辑，导致菜单状态异常。如何让多个按钮和原按钮一样，正常控制同一菜单的显示与隐藏？

问题示例：

原代码：

import 'package:flutter/material.dart';

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

final MenuController _menuController = MenuController();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              MenuAnchor(
                controller: _menuController,
                builder: (context, controller, child) {
                  return FilledButton(
                    onPressed: () {
                      controller.isOpen
                          ? controller.close()
                          : controller.open();
                    },
                    child: const Text('Test'),
                  );
                },
                menuChildren: const [
                  Text('Option 1'),
                  Text('Option 2'),
                  Text('Option 3'),
                ],
                child: const Text('Button'),
              ),
              FilledButton(
                onPressed: () {
                  _menuController.isOpen
                      ? _menuController.close()
                      : _menuController.open();
                },
                child: const Text('Another Button'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

问题原因 #

第二个按钮直接调用MenuController的open()/close()时，没有让MenuAnchor将该按钮识别为菜单的“关联触发源”，所以点击第二个按钮会被判定为点击菜单外部，先触发关闭逻辑，再执行按钮的打开/关闭操作，导致状态混乱。

解决方法 #

给第二个按钮也套上MenuAnchor.builder，让MenuAnchor将其视为合法的触发元素，共享同一个控制器即可。修改后的代码示例：

import 'package:flutter/material.dart';

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

final MenuController _menuController = MenuController();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              // 原菜单按钮
              MenuAnchor(
                controller: _menuController,
                builder: (context, controller, child) {
                  return FilledButton(
                    onPressed: () {
                      controller.isOpen ? controller.close() : controller.open();
                    },
                    child: const Text('Test'),
                  );
                },
                menuChildren: const [
                  Text('Option 1'),
                  Text('Option 2'),
                  Text('Option 3'),
                ],
              ),
              // 第二个控制按钮，绑定同一个控制器
              MenuAnchor(
                controller: _menuController,
                builder: (context, controller, child) {
                  return FilledButton(
                    onPressed: () {
                      controller.isOpen ? controller.close() : controller.open();
                    },
                    child: const Text('Another Button'),
                  );
                },
                // 无需重复定义menuChildren，控制器共享同一个菜单
              ),
            ],
          ),
        ),
      ),
    );
  }
}

核心逻辑说明 #

每个触发菜单的按钮都需要通过MenuAnchor的builder来构建，这样MenuAnchor会将按钮注册为菜单的“触发区域”，点击时不会被判定为外部点击。直接调用控制器方法时，MenuAnchor无法识别点击源，才会出现状态冲突的问题。

内容的提问来源于stack exchange，提问作者Keetz