Flutter如何实现Row组件内每行最多放置5个输入Widget

方案一：使用GridView.count（推荐） #

直接通过指定交叉轴数量控制每行元素个数，代码更简洁，自带滚动、间距配置能力：

final inputs = List.generate(100, (i) => TextEditingController());

// 渲染逻辑
GridView.count(
  // 若将GridView放在其他可滚动组件内，需添加以下两个属性避免布局冲突
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  crossAxisCount: 5, // 核心配置：每行最多展示5个输入框
  crossAxisSpacing: 3, // 水平方向输入框之间的间距
  mainAxisSpacing: 8, // 垂直方向行与行之间的间距，可自行调整
  padding: const EdgeInsets.all(8),
  children: List.generate(inputs.length, (index) {
    return TextField(
      autocorrect: false,
      controller: inputs[index],
      decoration: const InputDecoration(
        isDense: true, // 压缩输入框默认上下内边距，布局更紧凑
        border: OutlineInputBorder(),
      ),
    );
  }),
)

实现效果参考：

方案二：手动分组+Column嵌套Row实现 #

如果需要自定义每行的特殊逻辑，可以先把100个控制器按每5个一组拆分，再逐行渲染：

// 1. 先将控制器列表按每5个为一组拆分
List<List<TextEditingController>> controllerGroups = [];
for (int i = 0; i < inputs.length; i += 5) {
  int endIndex = i + 5 > inputs.length ? inputs.length : i + 5;
  controllerGroups.add(inputs.sublist(i, endIndex));
}

// 2. 渲染逻辑
Column(
  children: controllerGroups.map((group) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8), // 行与行之间的垂直间距
      child: Row(
        children: group.map((controller) {
          return Expanded(
            child: Padding(
              padding: const EdgeInsets.only(right: 3),
              child: TextField(
                autocorrect: false,
                controller: controller,
                decoration: const InputDecoration(
                  isDense: true,
                  border: OutlineInputBorder(),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }).toList(),
)

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