Flutter中实现CSS display:none等效效果的方法

在CSS里用display: none可以让元素完全不占用空间且不存在，在Flutter里要实现一样的效果，有两种常用的方式：

1. 直接条件渲染（最推荐） #

直接通过判断条件决定是否构建目标Widget，这种方式下，当条件不满足时，Widget根本不会被创建，完全不占用布局空间，和display: none效果完全一致。

示例代码：

bool _showWidget = false;

// 方式一：if语句
Column(
  children: [
    if (_showWidget)
      Text("这是要控制显示的内容"),
    Text("不受影响的其他内容"),
  ],
)

// 方式二：三元运算符
Column(
  children: [
    _showWidget ? Text("这是要控制显示的内容") : SizedBox.shrink(),
    Text("不受影响的其他内容"),
  ],
)

这里的SizedBox.shrink()是一个尺寸为0的空Widget，不会占用任何空间，作为条件不满足时的占位符。

2. 使用Visibility组件 #

如果需要更灵活的配置（比如临时隐藏但后续可能需要快速恢复，或者控制是否保留Widget状态），可以用Visibility组件，只要设置maintainSize: false，就能让Widget隐藏时不占用空间：

示例代码：

bool _showWidget = false;

Visibility(
  visible: _showWidget,
  maintainSize: false, // 隐藏时不占用空间
  maintainState: false, // 隐藏时不保留Widget状态（可选，根据需求设置）
  child: Text("这是要控制显示的内容"),
)

当visible设为false时，这个Widget不会被渲染，也不会占用布局空间，完全符合你的需求。

注意：Opacity组件只是改变透明度，Widget依然存在并占用空间；Offstage组件会隐藏Widget但保留其布局空间，这两种都不符合你要的“完全消失”的效果，别用。

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