Flutter如何返回无内容？避免空Container占用空间的方法

当你在build(BuildContext context)的else分支不想返回占空间的空Container时，有几种可靠的解决方式：

• 使用SizedBox.shrink()：这是最简洁的方案，它会生成一个0x0尺寸的盒子，完全不占用布局空间。示例代码：

Widget build(BuildContext context) {
  if (yourCondition) {
    return Container(
      // 你的正常布局内容
      child: Text("需要显示的内容"),
    );
  } else {
    return SizedBox.shrink();
  }
}

• 约束Container为零尺寸：如果一定要用Container，可通过约束强制它不占空间，同时要确保清除padding和margin：

Widget build(BuildContext context) {
  if (yourCondition) {
    return Container(
      child: Text("需要显示的内容"),
    );
  } else {
    return Container(
      constraints: const BoxConstraints.tight(Size.zero),
      padding: EdgeInsets.zero,
      margin: EdgeInsets.zero,
    );
  }
}

• 用Visibility组件动态控制：如果是需要根据条件切换显示/隐藏，且隐藏时不保留空间，可使用Visibility并设置maintainSize: false：

Widget build(BuildContext context) {
  return Visibility(
    visible: yourCondition,
    maintainSize: false, // 隐藏时不保留布局空间
    child: Container(
      child: Text("需要显示的内容"),
    ),
  );
}

注意：Flutter的build方法不能返回null，否则会触发异常。另外Offstage组件仅隐藏内容但仍保留布局空间，不适合你的场景，别用它。

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