如何创建在MainAxisAlignment.spaceBetween布局中不占空间的Widget？

当使用Row并设置mainAxisAlignment: MainAxisAlignment.spaceBetween时，若用空Container()作为条件组件的占位符，会因空Container默认占用空间导致布局出现空白。以下是几种实用解决方法：

方法1：直接在children列表中条件添加组件 #

只将需要显示的组件加入Row的children列表，完全避免占位符。Flutter 2.3+支持集合if语法，写法简洁：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text("左侧固定组件"),
    // 仅满足条件时添加组件
    if (shouldShowMiddleWidget) const Text("条件显示组件"),
    const Text("右侧固定组件"),
  ],
)

若使用旧版Flutter，可通过列表过滤实现：

List<Widget> buildRowChildren() {
  final children = <Widget>[
    const Text("左侧固定组件"),
    const Text("右侧固定组件"),
  ];
  if (shouldShowMiddleWidget) {
    children.insert(1, const Text("条件显示组件"));
  }
  return children;
}

// 使用时
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: buildRowChildren(),
)

这种方式性能最优，仅渲染必要组件，推荐优先使用。

方法2：使用Visibility组件并禁用空间保留 #

Visibility组件可控制组件显示/隐藏，通过设置maintainSize: false，隐藏时不会占用布局空间：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text("左侧固定组件"),
    Visibility(
      visible: shouldShowMiddleWidget,
      maintainSize: false, // 隐藏时不预留空间
      maintainAnimation: true, // 可选：保留动画状态
      maintainState: true, // 可选：保留组件状态
      child: const Text("条件显示组件"),
    ),
    const Text("右侧固定组件"),
  ],
)

适合需要保留组件状态（如输入框内容、滚动位置）的场景，隐藏时组件仍存在于组件树中。

方法3：用SizedBox.shrink()替代空Container #

空Container在Row中默认会占用剩余空间，而SizedBox.shrink()的尺寸为0x0，不会影响布局：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text("左侧固定组件"),
    shouldShowMiddleWidget 
        ? const Text("条件显示组件") 
        : const SizedBox.shrink(),
    const Text("右侧固定组件"),
  ],
)

这是一种快速修改的临时方案，代码改动最小，但可读性不如前两种方法。

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