Flutter中如何显示/隐藏组件？点击按钮显示组件失效求助

• 核心原因：多数UI库的Visibility组件默认隐藏逻辑只是通过CSS设置display: none，组件实例并未被卸载，因此再次显示时不会触发初始化类的渲染逻辑（比如componentDidMount、useEffect这类钩子不会重新执行）。

• 方案1：用条件渲染替代Visibility组件
  直接通过状态控制组件的挂载与卸载，彻底解决重新渲染问题：

  const [isVisible, setIsVisible] = useState(false);
  
  const toggleVisible = () => setIsVisible(!isVisible);
  
  return (
    <>
      <button onClick={toggleVisible}>切换显示</button>
      {isVisible && <YourTargetComponent />}
    </>
  );
  

  这种方式下，隐藏时组件会被完全卸载，再次显示时会重新挂载并执行所有初始化逻辑，自然触发重新渲染。

• 方案2：强制触发组件重新渲染
  如果必须保留Visibility组件，可以给目标组件添加key属性，切换可见性时更新key值，让React识别为新组件实例从而重新渲染：

  const [isVisible, setIsVisible] = useState(false);
  const [componentKey, setComponentKey] = useState(0);
  
  const toggleVisible = () => {
    setIsVisible(!isVisible);
    // 仅在显示时更新key，触发重新挂载
    if (!isVisible) {
      setComponentKey(prev => prev + 1);
    }
  };
  
  return (
    <>
      <button onClick={toggleVisible}>切换显示</button>
      <Visibility visible={isVisible}>
        <YourTargetComponent key={componentKey} />
      </Visibility>
    </>
  );
  

• 额外排查点：查看所用Visibility组件的官方文档，确认其隐藏时的行为是卸载组件还是仅视觉隐藏。如果是后者，优先考虑条件渲染方案。

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