Flutter中如何为Row内的Column子项设置顶部间距？

你的代码没达到预期效果，核心原因是Column默认使用MainAxisSize.max，在Expanded包裹下会强制占满Row的全部高度。此时你设置的Padding(top)只会让Column内部的内容向下偏移，而非整个Column整体下移，自然出不来错落的顶部间距效果。

修复方案 #

给每个Column添加mainAxisSize: MainAxisSize.min，让Column的高度由内部内容决定，这样Padding的top间距就会作用于整个Column，实现顶部错落的效果。

修改后的代码：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(top: 10),
        child: Column(
          mainAxisSize: MainAxisSize.min, // 新增配置
          children: [
            item(),
            item(),
            item(),
          ],
        ),
      ),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Column(
          mainAxisSize: MainAxisSize.min, // 新增配置
          children: [
            item(),
            item(),
            item(),
          ],
        ),
      ),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(top: 5),
        child: Column(
          mainAxisSize: MainAxisSize.min, // 新增配置
          children: [
            item(),
            item(),
            item(),
          ],
        ),
      ),
    ),
  ],
);

补充说明 #

如果你的需求是让Column占满Row高度的同时，内容顶部偏移，可以保留MainAxisSize.max，但需要给Column加上mainAxisAlignment: MainAxisAlignment.start，不过这种情况下Column会拉伸至Row的高度，视觉上和你想要的错落效果可能有差异。

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