Flutter中如何实现点击按钮后隐藏container或其他页面元素？

• 方案1：使用Visibility组件
  这是最通用的显隐控制方案，隐藏后组件完全不占用布局空间，也不会响应任何点击事件。你需要在StatefulWidget的State类中定义一个bool类型的状态变量控制显隐，点击按钮时调用setState更新变量值即可触发页面重绘。
  示例代码如下：

class HideContainerDemo extends StatefulWidget {
  const HideContainerDemo({super.key});

  @override
  State<HideContainerDemo> createState() => _HideContainerDemoState();
}

class _HideContainerDemoState extends State<HideContainerDemo> {
  // 定义控制显隐的状态变量，初始为显示状态
  bool _isContainerVisible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Visibility(
          visible: _isContainerVisible,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 点击按钮更新状态
            setState(() {
              _isContainerVisible = !_isContainerVisible;
            });
          },
          child: const Text("切换Container显隐"),
        )
      ],
    );
  }
}

• 方案2：使用Opacity组件
  如果你需要隐藏Container后，仍保留它原来占据的布局空间，可以选择该方案。将opacity属性设为0时组件完全透明不可见，设为1时正常显示。如果需要隐藏时屏蔽组件的点击事件，可以外层嵌套IgnorePointer组件。
  核心实现代码：

IgnorePointer(
  // 隐藏时忽略点击事件
  ignoring: !_isContainerVisible,
  child: Opacity(
    opacity: _isContainerVisible ? 1.0 : 0.0,
    child: Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
  ),
)

• 方案3：条件渲染
  直接在布局中通过条件判断决定是否渲染Container，隐藏时该组件完全不会被构建，适合不需要保留组件隐藏前状态的场景。
  核心实现代码：

Column(
  children: [
    // 条件为true时才渲染Container
    if(_isContainerVisible)
      Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    // 也可以用三目表达式实现
    // _isContainerVisible ? Container(/* 容器属性 */) : const SizedBox.shrink(),
    ElevatedButton(
      onPressed: () => setState(() => _isContainerVisible = !_isContainerVisible),
      child: const Text("切换显隐"),
    )
  ],
)

不同方案的适用场景：

• 不需要保留布局占位、不需要保留组件隐藏时的状态：优先选择Visibility或条件渲染
• 需要保留布局占位、隐藏时不需要响应点击：选择Opacity+IgnorePointer组合
• 需要保留布局占位、隐藏时仍要响应点击事件：直接使用Opacity组件

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