Flutter中如何为for循环生成的Container容器之间添加间距

以下两种方案都可以实现你需要的Container之间留白效果，适配当前横向滚动Row的布局场景：

方法1：循环内插入SizedBox（全Flutter版本兼容） #

通过Dart的集合展开运算符，在每次循环生成Container后追加间距组件，同时判断排除最后一个元素，避免列表末尾产生多余留白：

import 'package:flutter/material.dart';

class BlogPost extends StatelessWidget {
  const BlogPost({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(10.0),
      physics: const BouncingScrollPhysics(),
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          for (var i = 0; i < 5; i++) ...[
            Container(
              width: 150,
              height: 180,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.1),
                borderRadius:
                    const BorderRadius.all(Radius.elliptical(35.0, 35.0)),
              ),
            ),
            // 最后一个元素不追加间距，可按需修改width值调整间距大小
            if (i != 4) const SizedBox(width: 12),
          ]
        ],
      ),
    );
  }
}

方法2：使用Row/Column内置spacing参数（Flutter 3.16+版本可用） #

高版本Flutter为Flex类布局（Row、Column）新增了spacing属性，直接设置即可自动为所有子组件添加统一间距，不需要修改原有循环逻辑，代码更简洁：

import 'package:flutter/material.dart';

class BlogPost extends StatelessWidget {
  const BlogPost({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(10.0),
      physics: const BouncingScrollPhysics(),
      scrollDirection: Axis.horizontal,
      child: Row(
        // 直接设置子组件间的统一水平间距
        spacing: 12,
        children: [
          for (var i = 0; i < 5; i++)
            Container(
              width: 150,
              height: 180,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.1),
                borderRadius:
                    const BorderRadius.all(Radius.elliptical(35.0, 35.0)),
              ),
            ),
        ],
      ),
    );
  }
}

注意事项 #

• 横向Row布局的间距用SizedBox(width: 间距值)实现，纵向Column布局替换为SizedBox(height: 间距值)即可
• 如果不介意列表末尾存在多余空白，可以省略方法1中if (i != 4)的判断，直接给每个元素后追加SizedBox
• spacing是版本新增API，若项目使用的Flutter版本低于3.16，运行会报错，此时请使用方法1实现

如果你需要给组件添加不规则间距，也可以在循环逻辑中根据索引i的值单独判断，给特定位置的组件设置不同大小的间距。

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