Animation 动画不透明度和隐藏小部件，使其不可点击

我正在使用AnimatedOpacity根据滚动事件隐藏导航栏中的一个按钮。我特别是在使小部件进出动画时遇到困难，同时也使小部件不可点击

为了隐藏我的小部件并防止它被单击，我根据可见状态有条件地呈现my

CustomNavBar（）

组件或

Container（）

。但是，当我淡出时，会突然剪切动画。然而，它的工作原理是逐渐消失

AnimatedOpacity(
  opacity: _isVisible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 300),
  child: _isVisible
    ? CustomNavBar()
    : Container(),
)

这是意料之中的，因为当_isVisible为false时，组件实际上不存在。这会毁掉整个动画。我该怎么做

---

谢谢

可能还有其他方法可以做到这一点，但您可以使用两个变量来表示不透明度和可见性。使用AnimatedWidget的oned回调更改可见性。此外，您可能希望为此使用可见性小部件。如果你愿意，它甚至可以让你保持孩子的状态

/// somewhere outside of build in a StatefulWidget
bool _isVisible = true;
bool _isOpaque = true;


/// within the build method
AnimatedOpacity(
  opacity: _isOpaque ? 1.0 : 0.0,
  onEnd: (){
    if(!_isOpaque)
      setState((){
        _isVisible = false;
      });
  },
  child: Visibility(
    child: child,
    visible: _isVisible,
  ),
);


//then in some method to toggle the state...
setState((){
  if(!_isVisible){
    _isVisible = true;
    _isOpaque = true;
  }
  else{
    _isOpaque = false;
  }
})

想想看，你也有动画切换器，这是非常容易做到这一点。我将把上面的代码留作oned回调的参考。另外，如果在子窗口小部件中维护状态很重要，那么上面的代码将更适合，因为您有这个选项。如果这不重要，那就换掉它

AnimatedSwitcher(
   child: _isVisible ? child : SizedBox.shrink(),
)

---

我还为AppBar的特定动作提供了一个案例，我想用动画不透明度来显示/隐藏它。在意识到“不透明度”小部件使子对象可单击后，我最终使用AnimatedSwitcher作为动作小部件：

AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: !_visible
    ? SizedBox()
    : IconButton(
        icon: ... // more of the related code 
  ),
)

为了可读性，我故意否定将空SizedBox（）放在顶部的条件，因为主窗口小部件可能占用代码中的很多行

您可以使用自定义导航栏而不是我的图标按钮：

AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: !_visible
    ? SizedBox()
    : CustomNavBar(
        ... // more of the related code 
  ),
)

---

这对我来说是一种魅力。基本上，它说“当孩子看不见时忽略命中测试。

动画切换程序工作得很好。非常感谢。”

IgnorePointer(
    child: AnimatedOpacity(
        child: child,
        opacity: visible ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 200),
    ),
    ignoring: !visible,
)