如何基于Map动态创建支持无限嵌套的Flutter行列布局？

需求描述 #

根据给定的Map布局蓝图，动态创建支持无限层级嵌套的Row和Column组件，叶子节点为Text组件。

示例布局Map #

final Map<String, dynamic> layoutMap = {
  "rows": {
    0: {
      "cols": {
        0: {"text": "ABC"},
        1: {"text": "DEF"},
        2: {"text": "GHI"},
      },
    },
    1: {
      "cols": {
        0: {
          "rows": {
            0: {"text": "JKL"},
            1: {"text": "MNO"}
          },
        },
        1: {"text": "PQR"},
        2: {"text": "STU"},
      },
    },
  },
};

递归实现方案 #

核心思路是通过递归函数遍历Map结构，根据当前节点的rows/cols标识生成对应的Row或Column组件，叶子节点生成Text组件：

Widget buildLayout(dynamic data) {
  // 处理叶子节点：生成Text组件
  if (data is Map && data.containsKey("text")) {
    return Text(data["text"]);
  }

  // 处理Row节点：遍历子元素并递归构建组件
  if (data is Map && data.containsKey("rows")) {
    final rows = data["rows"] as Map;
    return Row(
      children: rows.entries.map((entry) => buildLayout(entry.value)).toList(),
    );
  }

  // 处理Column节点：遍历子元素并递归构建组件
  if (data is Map && data.containsKey("cols")) {
    final cols = data["cols"] as Map;
    return Column(
      children: cols.entries.map((entry) => buildLayout(entry.value)).toList(),
    );
  }

  // 异常情况返回空容器，避免布局崩溃
  return Container();
}

使用方式 #

在Widget的build方法中直接调用该函数即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: buildLayout(layoutMap),
  );
}

逻辑说明 #

1. 递归终止条件：当节点包含text字段时，直接生成对应Text组件。
2. 容器节点处理：若节点包含rows字段，生成Row组件并递归处理所有子节点作为Row的children；若包含cols字段则生成Column组件，同理处理子节点。
3. 容错处理：未匹配到上述类型时返回空Container，防止因数据格式异常导致布局报错。

内容的提问来源于stack exchange，提问作者Lucas Taulealea