如何在Flutter/Dart中用嵌套循环构建嵌套Widget？是否可行？

这种嵌套结构完全可以用循环实现，不仅可行，还能避免大量重复代码，让后续维护更方便。

实现思路 #

核心是先把图标列表按每组5个拆分（对应示例里每个Row的Icon数量），再循环遍历拆分后的分组，为每个分组生成对应的Row组件，同时处理第二个Row的外边距需求。

具体代码实现 #

首先写一个通用的列表拆分工具方法，把长列表分成指定大小的子列表：

List<List<T>> chunkList<T>(List<T> list, int chunkSize) {
  final chunks = <List<T>>[];
  for (var i = 0; i < list.length; i += chunkSize) {
    final end = (i + chunkSize < list.length) ? i + chunkSize : list.length;
    chunks.add(list.sublist(i, end));
  }
  return chunks;
}

接着用这个方法处理图标列表，再循环构建嵌套Widget：

final iconList = ["lock.png","map.png","stake.png","cheer.png","sushi.png","drink.png","toy.png","christmas.png","newyear.png","flag.png"];
// 按每组5个拆分列表
final iconChunks = chunkList(iconList, 5);

// 构建嵌套Widget
child: Column(
  children: [
    for (int i = 0; i < iconChunks.length; i++)
      // 只有第二个及以后的Row需要包裹带margin的Container
      i == 0
          ? Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (var icon in iconChunks[i])
                  selectIcon(id: 1, iconPass: icon),
              ],
            )
          : Container(
              margin: const EdgeInsets.only(top: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  for (var icon in iconChunks[i])
                    selectIcon(id: 1, iconPass: icon),
                ],
              ),
            ),
  ],
);

代码说明 #

• chunkList方法：通用型列表拆分工具，支持任意类型的列表和分组大小，后续如果需要调整每个Row的Icon数量，只修改chunkSize参数即可。
• 外层循环遍历拆分后的分组：根据索引判断是否添加顶部外边距，完美匹配示例的结构需求。
• 内层循环为每个分组生成对应的selectIcon组件，彻底避免手动重复编写多个组件。

额外优化 #

如果后续需要统一调整所有Row的样式（比如对齐方式、内边距），或者修改selectIcon的参数，只需要在循环代码里修改一处即可，不需要逐个修改每个Row里的组件，大幅提升代码的可维护性。

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