Flutter中如何创建点击后向菜单项侧边展开的下拉菜单子菜单？

我们可以通过组合Flutter自带的PopupMenuButton和PopupMenuItem组件，实现点击菜单项时侧边展开子菜单的效果，核心是在包含子菜单的项中嵌套另一个PopupMenuButton。

完整实现代码 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('二级下拉菜单示例')),
        body: const Center(child: DropdownWithSubmenu()),
      ),
    );
  }
}

// 菜单数据模型，统一管理标题和子菜单
class MenuItem {
  final String title;
  final List<MenuItem>? subItems;

  MenuItem({required this.title, this.subItems});
}

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

  @override
  State<DropdownWithSubmenu> createState() => _DropdownWithSubmenuState();
}

class _DropdownWithSubmenuState extends State<DropdownWithSubmenu> {
  // 模拟业务菜单数据
  final List<MenuItem> menuItems = [
    MenuItem(title: '首页'),
    MenuItem(
      title: '分类',
      subItems: [
        MenuItem(title: '电子产品'),
        MenuItem(title: '服饰鞋帽'),
        MenuItem(title: '家居用品'),
      ],
    ),
    MenuItem(
      title: '我的',
      subItems: [
        MenuItem(title: '个人中心'),
        MenuItem(title: '设置'),
        MenuItem(title: '退出登录'),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      icon: const Icon(Icons.menu),
      itemBuilder: (context) {
        return menuItems.map((item) {
          // 处理带二级子菜单的项
          if (item.subItems != null && item.subItems!.isNotEmpty) {
            return PopupMenuItem(
              child: PopupMenuButton(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(item.title),
                    const Icon(Icons.arrow_right),
                  ],
                ),
                itemBuilder: (context) {
                  return item.subItems!.map((subItem) {
                    return PopupMenuItem(
                      child: Text(subItem.title),
                      onTap: () {
                        // 这里添加子菜单点击后的业务逻辑
                        debugPrint('触发子菜单：${subItem.title}');
                      },
                    );
                  }).toList();
                },
              ),
            );
          } else {
            // 处理普通菜单项
            return PopupMenuItem(
              child: Text(item.title),
              onTap: () {
                // 这里添加普通菜单点击后的业务逻辑
                debugPrint('触发菜单：${item.title}');
              },
            );
          }
        }).toList();
      },
    );
  }
}

关键说明 #

• 用MenuItem模型封装菜单数据，后续新增或修改菜单结构只需调整数据，无需大量改动UI代码
• 带二级子菜单的项通过嵌套PopupMenuButton实现侧边展开，右侧箭头直观提示用户可交互
• 可根据需求自定义菜单样式，比如修改文字样式、图标、菜单背景色等，适配不同设计风格

内容的提问来源于stack exchange，提问作者RANJIT KUMAR SAHU