求实现点击展开次级可跳转菜单的Flutter组件

未点击状态 #

点击红圈按钮后 #

想咨询一下，我该使用哪种Widget来实现如图所示的设计？点击红圈中的按钮后会弹出另一菜单，且该菜单的选项可点击跳转至其他菜单。我已尝试使用DropdownButton、ListTileTheme和ExpansionTile，但均未达到预期效果，恳请各位提供建议。

推荐以下几种可行方案：

• PopupMenuButton：这是最贴合你需求的组件，专门用于点击按钮弹出可交互菜单，菜单项支持自定义点击事件实现跳转。示例代码：

PopupMenuButton(
  icon: const Icon(Icons.keyboard_arrow_down), // 匹配红圈按钮样式
  itemBuilder: (BuildContext context) => [
    PopupMenuItem(
      child: const Text("菜单选项1"),
      onTap: () {
        // 跳转逻辑，例如：
        // Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage1()));
      },
    ),
    PopupMenuItem(
      child: const Text("菜单选项2"),
      onTap: () {
        // 对应跳转逻辑
      },
    ),
  ],
  // 可自定义菜单样式
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  color: Colors.white,
)

• GestureDetector + OverlayEntry：如果需要高度定制菜单布局、动画效果，可通过GestureDetector监听点击事件，再用OverlayEntry手动添加弹出层，这种方式灵活性拉满，能完全匹配设计细节。

• DropdownButtonFormField：若菜单需关联表单逻辑可考虑，但仅做弹出跳转菜单的话，PopupMenuButton更合适。

你之前尝试的ExpansionTile是展开当前列表区域，不符合“弹出独立菜单”的交互；DropdownButton偏向选择器，默认样式和交互逻辑和你的需求匹配度低，建议优先尝试PopupMenuButton。

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