Flutter | Умоляю, добавьте анимацию при переключении виджетов

Flutter

Как мы обычно переключаем виджеты?

Есть ли эффект анимации? Вы напрямую изменили виджет?

Что-то вроде этого:

Если это так, то упомянутый сегодня виджет определенно соответствует вашему вкусу.

Как добавить спецэффекты при переключении виджетов во Flutter? Чтобы добиться такого эффекта?

AnimatedSwitcherУзнать о.

AnimatedSwitcher

Официальное введение

Нечего сказать, мы уже знаем эту функцию, давайте взглянем на официальное введение:

A widget that by default does a FadeTransition between a new widget and the widget previously set on the AnimatedSwitcher as a child.

If they are swapped fast enough (i.e. before duration elapses), more than one previous child can exist and be transitioning out while the newest one is transitioning in.

If the "new" child is the same widget type and key as the "old" child, but with different parameters, then AnimatedSwitcher will not do a transition between them, since as far as the framework is concerned, they are the same widget and the existing widget can be updated with the new parameters. To force the transition to occur, set a Key on each child widget that you wish to be considered unique (typically a ValueKey on the widget data that distinguishes this child from the others).

Это примерно означает:

По умолчанию используется анимация прозрачности.

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

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

Конструктор

Давайте еще раз посмотрим на конструктор, чтобы определить, как его использовать:

const AnimatedSwitcher({
  Key key,
  this.child,
  @required this.duration,
  this.reverseDuration,
  this.switchInCurve = Curves.linear,
  this.switchOutCurve = Curves.linear,
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
}) : assert(duration != null),
assert(switchInCurve != null),
assert(switchOutCurve != null),
assert(transitionBuilder != null),
assert(layoutBuilder != null),
super(key: key);

Чтобы объяснить каждый параметр:

  1. ребенок: само собой разумеется
  2. продолжительность: продолжительность анимации
  3. reverseDuration: продолжительность анимации от нового виджета к старому виджету или значение продолжительности, если оно не установлено
  4. switchInCurve: эффект анимации
  5. switchOutCurve: то же, что и выше
  6. transitionBuilder: установить новую анимацию перехода
  7. layoutBuilder: компонент, который объединяет старые и новые виджеты, по умолчанию это стек.

Обязательным параметром являетсяduration, то раз уж вы умеете им пользоваться, приступим.

Простой пример

Картинка, которую мы рассмотрели ранее, правильнаяAppBarВверхactionsработать,

На самом деле этот пример часто существует в реальной разработке, и некоторые вещи надо удалять, а потом выбирать и удалять пачками.

Здесь нечего сказать, перейдите непосредственно к коду, а затем объясните:

class _AnimatedSwitcherPageState extends State<AnimatedSwitcherPage> {
  IconData _actionIcon = Icons.delete;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('AnimatedSwitcherPage'),
          actions: <Widget>[
            AnimatedSwitcher(
              transitionBuilder: (child, anim){
                return ScaleTransition(child: child,scale: anim);
              },
              duration: Duration(milliseconds: 300),
              child: IconButton(
                  key: ValueKey(_actionIcon),
                  icon: Icon(_actionIcon),
                  onPressed: () {
                    setState(() {
                      if (_actionIcon == Icons.delete)
                        _actionIcon = Icons.done;
                      else
                        _actionIcon = Icons.delete;
                    });
                  }),
            )
          ],
        ),
        body: Container());
  }
}

То, что мы определяем, являетсяStatefulWidget, потому что вызывается при переключении виджетовsetState(),

Вот весь процесс:

  1. Сначала определите данные значка, который мы инициализировали, какIcons.delete
  2. существуетAppBarизactionsдобавить внутрьAnimatedSwitcher
  3. настраиватьtransitionBuilderдля масштабирования анимацииScaleTransition
  4. ДатьAnimatedSwitcherРебенокIconButton
  5. Поскольку в официальном документе упоминалось ранее, если тип виджета тот же, но данные разные, то, если вы хотите анимировать, вы должны добавить ключ.
  6. Итак, мы даемIconButtonдобавилValueKey, значение определяетсяIconData
  7. Наконец, переключите два значка в событии клика, чтобы завершить

Наконец, посмотрите на эффект:

Суммировать

Самое главное, на что следует обратить внимание при использовании этого элемента управления, это проблема Ключа, вы должны помнить:

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

Полный код был передан на GitHub:GitHub.com/web1209/…

Категории