анимированная прозрачность и скрытие виджета, чтобы его нельзя было кликнуть

Question

Я использую AnimatedOpacity, чтобы скрыть панель навигации на основе события прокрутки. У меня, в частности, возникают проблемы с настройкой анимации хорошо, , а также делает виджет не интерактивным.

Чтобы скрыть мой виджет и предотвратить его нажатие, я условно отображаю свой компонент CustomNavBar() или Container() на основе видимого состояния. Однако это резко обрезает мою анимацию , когда я исчезаю. Однако он работает постепенно.

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

Это ожидаемо, поскольку компонент буквально не существует, когда _isVisible имеет значение false. Это убивает всю анимацию. Как мне обойти это?

Спасибо

Answer 1

Могут быть и другие способы сделать это, но вы можете использовать две переменные для непрозрачности и видимости. Используйте обратный вызов OnEnd AnimatedWidget, чтобы изменить видимость. Кроме того, вы можете использовать виджет видимости для этого. Это позволяет вам даже поддерживать состояние ребенка, если хотите.

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