Flutter Web中PopupMenuButton点击无法切换图标问题求助

你的代码存在几个关键问题导致功能失效：

• ElevatedButton的onPressed拦截了PopupMenuButton的点击事件，导致菜单无法弹出，同时手动切换状态的逻辑也和PopupMenu的原生行为冲突。
• Icon的判断条件使用了赋值操作menuClicked = true，而非相等判断menuClicked == true，所以图标永远只会显示Icons.menu。
• 没有利用PopupMenuButton自带的回调监听菜单的展开/关闭状态，而是尝试手动处理点击逻辑，方向错误。

以下是修复后的完整代码：

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

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isMenuOpen = false; // 标记菜单是否展开

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          PointerInterceptor(
            intercepting: true,
            child: PopupMenuButton<String>(
              offset: const Offset(10.0, 50.0),
              color: Colors.black,
              // 根据菜单状态切换图标
              child: Icon(
                isMenuOpen ? Icons.close : Icons.menu,
                color: Colors.white,
              ),
              // 菜单展开时更新状态
              onOpened: () {
                setState(() {
                  isMenuOpen = true;
                });
              },
              // 菜单关闭时恢复状态
              onClosed: (value) {
                setState(() {
                  isMenuOpen = false;
                });
              },
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                PopupMenuItem(
                  value: "close",
                  child: ListTile(
                    leading: const Icon(Icons.close, color: Colors.white),
                    title: const Text('Close', style: TextStyle(color: Colors.white)),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      body: const Center(
        child: Text('test'),
      ),
    );
  }
}

关键修复点说明：

1. 移除了ElevatedButton，直接用Icon作为PopupMenuButton的child，这样点击图标会直接触发菜单弹出，不会拦截事件。
2. 使用isMenuOpen变量标记菜单状态，通过PopupMenuButton的onOpened和onClosed回调来更新状态：
   • onOpened在菜单展开时触发，将isMenuOpen设为true，显示关闭图标。
   • onClosed在菜单关闭时触发（包括点击菜单项、点击外部区域关闭），将isMenuOpen设为false，显示菜单图标。
3. 修正了图标的判断逻辑，使用相等判断而非赋值操作，确保图标正确切换。
4. 保留了PointerInterceptor以解决Flutter Web中PopupMenu的点击穿透问题。

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