Flutter如何实现未知层级的嵌套Expansion Tile（分类与子分类）

首先定义分类数据模型，用来匹配你的数据结构：

class Category {
  final String name;
  final List<Category>? subCategories;

  Category({required this.name, this.subCategories});
}

核心思路是用递归组件处理未知层级的分类，根据当前分类是否包含子分类，自动切换渲染ListTile或ExpansionTile：

Widget _buildCategoryItem(Category category) {
  // 无任何子分类时，渲染普通ListTile
  if (category.subCategories == null || category.subCategories!.isEmpty) {
    return ListTile(
      title: Text(category.name),
      onTap: () {
        // 这里添加普通分类的点击逻辑
        print('选中分类：${category.name}');
      },
    );
  }

  // 存在子分类时，渲染嵌套的ExpansionTile
  return ExpansionTile(
    title: Text(category.name),
    // 递归处理每个子分类，自动适配深层级结构
    children: category.subCategories!.map(_buildCategoryItem).toList(),
    onExpansionChanged: (isExpanded) {
      // 可选：添加展开/收起的回调逻辑
      print('${category.name} ${isExpanded ? '已展开' : '已收起'}');
    },
  );
}

最后在页面中直接使用这个递归函数，传入根分类列表即可：

class CategoryListPage extends StatelessWidget {
  // 模拟的未知层级分类数据
  final List<Category> categoryData = [
    Category(
      name: '电子产品',
      subCategories: [
        Category(name: '手机'),
        Category(
          name: '电脑',
          subCategories: [
            Category(name: '笔记本'),
            Category(
              name: '台式机',
              subCategories: [
                Category(name: '组装机'),
                Category(name: '品牌机'),
              ],
            ),
          ],
        ),
      ],
    ),
    Category(name: '服饰'),
    Category(
      name: '家居',
      subCategories: [
        Category(name: '家具'),
        Category(name: '家纺'),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分类列表')),
      body: ListView(
        children: categoryData.map(_buildCategoryItem).toList(),
      ),
    );
  }

  // 上面的递归函数放在这里
  Widget _buildCategoryItem(Category category) {
    if (category.subCategories == null || category.subCategories!.isEmpty) {
      return ListTile(
        title: Text(category.name),
        onTap: () {
          print('选中分类：${category.name}');
        },
      );
    }

    return ExpansionTile(
      title: Text(category.name),
      children: category.subCategories!.map(_buildCategoryItem).toList(),
      onExpansionChanged: (isExpanded) {
        print('${category.name} ${isExpanded ? '已展开' : '已收起'}');
      },
    );
  }
}

关键说明 #

• 递归调用_buildCategoryItem处理每个子分类，不管层级多深都能自动适配
• 通过判断subCategories是否为空，动态切换渲染组件类型
• 可以根据需求自定义ListTile和ExpansionTile的样式、点击事件等逻辑

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