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

Question

我正在使用 AnimatedOpacity 来隐藏基于滚动事件的导航栏。我特别难以让它进出动画，同时也制作小部件 不是 可点击。

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

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

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

谢谢

Answer 1

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

/// 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(),
)