如何从JSON响应动态创建Flutter嵌套树形Widget？

你的核心问题是手动编写的Widget无法适配动态变化的多层嵌套结构，解决思路是用递归方法遍历嵌套数据，自动生成对应的树形节点，不管新增多少层子节点都能适配。

步骤1：定义数据模型 #

先把JSON结构转换成Dart实体类，实现类型安全的数据处理：

class Category {
  final String uid;
  final String name;
  final String? description;
  final int? level;
  final String? childrenCount;
  final List<Category>? children;

  Category({
    required this.uid,
    required this.name,
    this.description,
    this.level,
    this.childrenCount,
    this.children,
  });

  // 从JSON转为实体对象的工厂方法
  factory Category.fromJson(Map<String, dynamic> json) {
    return Category(
      uid: json['uid'] ?? '',
      name: json['name'] ?? '',
      description: json['description'],
      level: json['level'] != null ? int.parse(json['level']) : null,
      childrenCount: json['children_count'],
      children: json['children'] != null
          ? (json['children'] as List)
              .map((e) => Category.fromJson(e))
              .toList()
          : null,
    );
  }
}

步骤2：编写递归构建节点的方法 #

递归遍历每个Category对象，生成flutter_simple_treeview的TreeNode，自动处理子节点嵌套：

import 'package:flutter_simple_treeview/flutter_simple_treeview.dart';

TreeNode buildTreeNode(Category category) {
  // 当前节点的UI，可根据需求自定义样式
  final nodeContent = Padding(
    padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
    child: Text(category.name),
  );

  final children = category.children ?? [];
  // 有子节点则递归生成子节点列表，无则返回单个节点
  return children.isNotEmpty
      ? TreeNode(
          content: nodeContent,
          children: children.map(buildTreeNode).toList(),
        )
      : TreeNode(content: nodeContent);
}

步骤3：在Widget中集成使用 #

解析API返回的JSON数据，通过递归方法生成完整树形结构：

class CategoryTreePage extends StatelessWidget {
  final Map<String, dynamic> apiResponse; // API返回的原始JSON数据

  const CategoryTreePage({super.key, required this.apiResponse});

  @override
  Widget build(BuildContext context) {
    // 解析根分类列表
    final rootCategories = (apiResponse['data']['categories']['items'] as List)
        .map((e) => Category.fromJson(e))
        .toList();

    // 生成树形节点列表
    final treeNodes = rootCategories.map(buildTreeNode).toList();

    return Scaffold(
      appBar: AppBar(title: const Text('分类树形结构')),
      body: TreeView(
        nodes: treeNodes,
        indent: 24, // 可自定义缩进距离
      ),
    );
  }
}

核心优势 #

• 完全适配动态嵌套：无论给任何节点新增多少层子节点，递归逻辑都会自动遍历生成对应Widget
• 代码易维护：无需手动编写多层嵌套的Widget结构，仅需维护递归逻辑和节点UI
• 类型安全：通过实体类处理数据，避免JSON解析的潜在错误

内容的提问来源于stack exchange，提问作者R Dewan