Как сделать анимацию героя для двух виджетов - PullRequest
Новая
       5

Как сделать анимацию героя для двух виджетов

0 голосов
/ 06 января 2020

Мне нужно сделать анимацию типа Hero в двух разных виджетах. Возможно ли это?
Виджет a с изображением a и виджет b с изображением a, но виджет a находится внутри списка, а виджет b - это полноэкранное изображение (оно скрывает представление списка)

1 Ответ

1 голос
/ 06 января 2020

Это очень просто. Вам просто нужно обернуть оба виджета в виджет Hero, используя одно и то же значение свойства TAG. Приведенный ниже фрагмент предполагает, что у вас Image в ListTile, и после щелчка пользователя вы показываете новую страницу с тем же изображением, но это изображение будет анимировано виджетом Hero.

На странице списка элементы списка могут быть 

ListTile(
      leading: Hero(
        tag: IMAGE_TAG, // must be the same in different pages
        child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
      ),
      title: Text('Anything'),
      onTap: () => // Just go to full screen page
    );

На полноэкранной странице 

Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Hero(
          tag: 'IMAGE_TAG', // must be the SAME VALUE DEFINED IN list tile hero child widget.  
          child: Image(image: AssetImage('you_asset_dir/yourImage.png')),
        ),
      ),
    );

OBS: свойство тега Hero должно быть то же самое в разных контекстах, но если у вас есть список с множеством элементов, использующих виджет Hero каждый Hero int, один и тот же контекст / страница должны иметь разные значения tag.

Для глубокого погружения в концепции анимации героев отметьте официальный номер c

...