Переходы верхнего уровня во флаттере - PullRequest
Новая
       22

Переходы верхнего уровня во флаттере

0 голосов
/ 23 декабря 2018

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

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

Ссылка

Сначала исчезает текущий вид, затем - выбранный вид. Проблема в том, что флаттер неКажется, что у анимации анимации больше двух шагов, это означает, что я не могу изменить непрозрачность с 1,0 до 0,0, а затем обратно на 1,0 (как CSS @keyframes).

Кто-нибудь знает, как яможет сделать это?Должен ли я использовать что-то отличное от Tween?

Я пытался использовать несколько анимаций Tween и изменить среднюю анимацию opacity значения виджета Opacity, но при этом даже анимация не происходит.

1 Ответ

0 голосов
/ 18 июля 2019

Для этого нужно использовать стек.Этот стек должен содержать как виджет для постепенного исчезновения, так и виджет для постепенного появления. Создайте два Tweens, управляемых одним и тем же контроллером анимации, один с постепенным исчезновением (с 1,0 до 0,0), другой для постепенного появления. Сделайте это в initState() изсостояние виджета с состоянием: 

_animationController =
    AnimationController(duration: Duration(milliseconds: 500), vsync: this);
_fadeIn = Tween(begin: 0.0, end: 1.0).animate(_animationController);
_fadeOut = Tween(begin: 1.0, end: 0.0).animate(_animationController);

(Государству необходимо использовать миксин TickerProviderStateMixin или SingleTickerProviderStateMixin).

С исчезновением виджета a и постепенным исчезновением b, виджет, возвращаемый вашим методом сборки, будет выглядеть следующим образом: 

Stack(children: [
  FadeTransition(
    child: a,
    opacity: _fadeOut,
  ),
  FadeTransition(
    child: b,
    opacity: _fadeIn,
  )
]);

В конце концов вы запускаете анимацию, вызывая 

_animationController?.reset();
_animationController?.forward();

из вашего метода сборки.

Не забудьте удалить контроллер из метода dispose состояния вашего виджета.

Возможно, вы захотите создатьвиджет общего назначения с замиранием, который был бы виджетом с состоянием и состоянием, унаследовавшим некоторую разновидность TickerProviderMixin.

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

Редактировать: нашел виджет AnimatedSwitcher в библиотеке виджетов Flutter, который делает именно то, что вам нужно.Это виджет общего назначения, о котором я говорил.

...