Flutter中Row设置spaceBetween且子组件自适应宽度不生效如何解决

问题原因 #

• 外层Column设置了crossAxisAlignment: CrossAxisAlignment.start，该配置会让Column的直接子元素（也就是你写的Row）宽度收缩为「所有子组件宽度之和」，不会撑满父容器的可用水平宽度。
• MainAxisAlignment.spaceBetween的生效前提是Row本身存在可分配的剩余水平空间，Row宽度刚好等于子组件总宽度时没有剩余空间，对齐属性自然无法生效，两个子组件就会紧挨靠左排列。
• 最外层Container设置width: null的写法本身没有问题，在父组件有明确约束的场景下会自动适配宽度，不需要修改这个配置，第一个子Container也会保持根据内部内容自适应宽度的特性。

修复代码 #

只需要给Row组件加一层宽度为double.infinity的SizedBox，强制Row撑满父容器的全部可用宽度即可，其余原有逻辑不需要改动：

Container(
      width: null, // 保留原有配置，自动适配父容器宽度
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.fromLTRB(20, 20, 20, kIsWeb ? 20 : 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: secondaryBackground,
      ),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        // 新增SizedBox包裹Row，强制撑满水平可用空间
        SizedBox(
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 对齐属性正常生效
            children: [
              Container(
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: textColor.withOpacity(.1),
                ),
                child: Text("First Item",
                    style: const TextStyle(
                        fontSize: 15,
                        color: textColor,
                        fontWeight: FontWeight.w600)),
              ),
              Container(
                padding: const EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: textColor.withOpacity(.1),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min, // 新增配置，让Column适配内部内容高度
                  children: [
                    Text("Second Item",
                        style: const TextStyle(
                            fontSize: 15,
                            color: textColor,
                            fontWeight: FontWeight.w600)),
                  ],
                ),
              ),
            ],
          ),
        ),
        // ... 其余原有代码
      ]),
    )

补充说明 #

• 代码里给包裹"Second Item"的Column新增了mainAxisSize: MainAxisSize.min配置，因为Column默认会占满可用垂直高度，加上这个配置后会自动适配内部文本高度，避免出现不必要的空白。
• 如果不想额外嵌套SizedBox，也可以用ConstrainedBox给Row设置constraints: BoxConstraints(minWidth: double.infinity)，实现效果完全一致。

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