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

Question

我正在使用 AnimatedOpacity 来隐藏基于滚动事件的导航栏。我特别无法让它很好地进出动画，同时也使小部件不可点击。

为了隐藏我的小部件并防止它被点击，我有条件地渲染我的CustomNavBar()组件或Container()基于可见状态。但是，当我淡出时，这会突然切断我的动画。然而，它会逐渐消失。

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

这是意料之中的，因为当 _isVisible 为 false 时，组件实际上不存在。这杀死了整个动画。我该如何解决这个问题？

谢谢

Answer 1

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

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

Answer 2

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

/// 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;
  }
})

想想看，你也有 AnimatedSwitcher，它更容易做到这一点。我将上面的代码留给 onEnd 回调参考。此外，如果在子小部件中维护状态很重要，那么上面的代码将更适合，因为您有该选项。如果它不重要，那么切换。

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