Flutter中如何折叠弹出菜单？如何调整导航栏弹出菜单宽度及缩放图标文字？

1. 折叠（关闭）Popup Menu #

常用两种手动关闭方式：

• 通过GlobalKey主动控制：给PopupMenuButton绑定GlobalKey，需要关闭时调用closeMenu()方法

  final GlobalKey<PopupMenuButtonState<_MenuValues>> _menuKey = GlobalKey();
  
  // 给PopupMenuButton设置key
  PopupMenuButton<_MenuValues>(
    key: _menuKey,
    // ...其他原有属性
  )
  
  // 触发关闭逻辑时调用
  _menuKey.currentState?.closeMenu();
  

• 路由跳转自动关闭：你的代码里通过Navigator.push跳转页面时，Popup Menu默认会自动关闭，无需额外操作。如果遇到异常不关闭的情况，可在跳转前手动调用上面的closeMenu()。

2. 缩小Popup Menu宽度 #

默认Popup Menu宽度由子项内容决定，使用ListTile会自带多余内边距导致宽度偏大，建议自定义子项布局替代ListTile，同时用ConstrainedBox限制宽度：

PopupMenuItem(
  value: _MenuValues.settings,
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 160), // 自定义最大宽度
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4), // 减少内边距
      child: Row(
        children: [
          Icon(Icons.settings, color: Colors.white),
          SizedBox(width: 8),
          Text("Settings", style: TextStyle(color: Colors.white)),
        ],
      ),
    ),
  ),
)

通过这种方式可以精准控制Popup Menu的整体宽度，避免ListTile带来的冗余空间。

3. 缩放图标与文字 #

直接调整Icon的size属性和Text的fontSize即可，结合自定义子项布局更灵活：

PopupMenuItem(
  value: _MenuValues.settings,
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 160),
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Row(
        children: [
          Icon(Icons.settings, color: Colors.white, size: 20), // 调整图标大小
          SizedBox(width: 8),
          Text(
            "Settings",
            style: TextStyle(
              color: Colors.white,
              fontSize: 14, // 调整文字大小
            ),
          ),
        ],
      ),
    ),
  ),
)

如果坚持使用ListTile，也可以单独在leading和title里设置：

ListTile(
  leading: Icon(Icons.settings, color: Colors.white, size: 20),
  title: Text("Settings", style: TextStyle(color: Colors.white, fontSize: 14)),
  contentPadding: EdgeInsets.symmetric(horizontal: 8), // 减少ListTile内边距
)

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