将嵌套MenuModel列表转为Flutter嵌套组件的算法实现求助

云上老周

2026-8-16

解决方案

可以通过递归函数处理嵌套的MenuModel列表，自动生成对应的ExpansionTile和ListTile结构，核心逻辑是根据每个MenuModel的属性判断生成展开项还是普通选项：

1. 递归构建菜单组件的函数

创建一个返回List<Widget>的递归函数，遍历每个MenuModel并生成对应组件：

List<Widget> buildMenuItems(List<MenuModel> menuItems) {
  List<Widget> items = [];
  for (var item in menuItems) {
    // 有子菜单时生成ExpansionTile
    if (item.menues != null && item.menues!.isNotEmpty) {
      items.add(
        ExpansionTile(
          title: Text(item.title),
          children: buildMenuItems(item.menues!),
        ),
      );
    } else {
      // 无菜单但有路由时生成可跳转的ListTile
      items.add(
        ListTile(
          title: Text(item.title),
          onTap: item.route != null
              ? () => Navigator.pushNamed(context, item.route!)
              : null,
        ),
      );
    }
  }
  return items;
}

2. 在页面中调用函数

将递归生成的组件放入ListView或Drawer等容器中即可使用：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Nested Menu')),
    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text('Menu'),
          ),
          ...buildMenuItems(menu),
        ],
      ),
    ),
    body: const Center(child: Text('Home Page')),
  );
}