A Deep Dive Into Hero Widgets in Flutter

Урок за силата на Hero джаджи във Flutter

Тази статия е четвъртата статия от поредица от статии, предназначени за подробно проучване на Flutter джунджурии. След като покрием ListViews, TextFields и FloatingActionButtons в дълбочина, сега ще влезем в Hero джаджа във Flutter.

Въведение в анимациите на героите

Анимацията на героите в едно изречение е просто елемент от един екран „лети“ към следващия, когато приложението преминава към следващата страница.

Hero Animations вземат елемент като икона, която сега се нарича "Hero" и след като преходът на страницата се задейства, обикновено чрез щракване върху иконата, героят "лети" към следващата страница. Когато потребителят се върне към по-ранната страница, анимацията преминава в другата посока, а иконата се връща на мястото си.

Ще обсъдим не само основните анимации с герои, но и неща, които можем да персонализираме. Нека първо да видим основите

Създаване на анимация на основен герой

Героите анимации са може би една от най-лесните анимации, които се правят в Flutter и не се нуждаят от много настройки. Разглеждайки примера по-горе, можем да видим, че една и съща приспособление за икона на приложението има и на двете страници. Всичко, от което се нуждаем, е начин да кажем на Flutter, че и двамата са свързани.

Правим това, като увиваме елемент като икона в джаджа Hero.

Hero (
  таг: "DemoTag",
  дете: Икона (
    Icons.add,
    размер: 70.0,
  ),
),

Ние го доставяме, за да дадем име на този конкретен герой. Това е необходимо, защото ако имаме няколко героя на една и съща страница, всеки герой знае докъде да лети.

Сега приложението знае, че има джаджа герой, която иска да прелети до следващата страница. Сега всичко, от което се нуждаем, е място, до което да летим.

Всичко, от което се нуждаем, е джаджа Hero на втората страница със същия маркер.

Hero (
  таг: "DemoTag",
  дете: Икона (
    Icons.add,
    размер: 150.0,
  ),
),

И това води до:

Hero анимацията, създадена с кода по-горе

Персонализиране на герои анимации

Приспособлението Hero ни позволява да персонализираме аспекти на анимацията. Нека да проучим няколко възможности.

Добавяне на заместители

След като джаджата излита от мястото, на което е била преди и преди джаджата да пристигне до местоназначението, в местоназначението има празно място. Можем да добавим заместител на място към това местоположение.

За сега използваме CircularProgressIndicator като заместител.

Hero (
    таг: "DemoTag",
    дете: Икона (
      Icons.add,
      размер: 150.0,
    ),
    placeholderBuilder: (контекст, джаджа) {
      връщане контейнер (
        височина: 150.0,
        ширина: 150.0,
        дете: CircularProgressIndicator (),
      );
    }
  ),

Използваме placeholderBuilder, за да конструираме заместителя и да върнем приспособлението, което бихме искали да имаме като заместител.

Използване на заместител:

CircularProgressIndicator заема мястото на героя до пристигането му.

Промяна на джаджа Hero

Flutter ни позволява да променим приспособлението, което всъщност прелита от една страница на друга, без да променяме джуджетата на двете страници.

Нека използваме икона на ракета вместо икона „+“ като герой, без да променяме децата на джаджи-герои.

Иконата на героя се променя, но крайните икони остават същите.

Правим това с помощта на параметъра flyShuttleBuilder (Следователно, примерът на ракетата).

Hero (
  таг: "DemoTag",
  дете: Икона (
    Icons.add,
    размер: 150.0,
  ),
  полетShuttleBuilder: (полет Контекст, анимация, посока,
      отContext, toContext) {
    икона за връщане (FontAwesomeIcons.rocket, размер: 150.0,);
  }
),

Методът flyShuttleBuilder има 5 параметъра и ни дава анимацията, както и посоката на анимацията.

Засега размерът на иконата на ракетата остава 150,0 за двете посоки. Можем да имаме различни конфигурации за всяка посока, като използваме параметъра на посоката на метода.

ако (посока == HeroFlightDirection.push) {
  икона за връщане (
    FontAwesomeIcons.rocket,
    размер: 150.0,
  );
} else if (посока == HeroFlightDirection.pop) {
  икона за връщане (
    FontAwesomeIcons.rocket,
    размер: 70.0,
  );
}
Размерите вече са различни в различни посоки.

Направете анимациите на Hero да работят с жестове за преместване на iOS назад

По подразбиране анимациите с герои работят, когато бутонът за връщане е натиснат на iOS, но не работят при прекарване на пръст назад.

Използване на бутона за връщане:

Бутон

Използване на пръст назад:

Плъзнете назад, не задейства анимацията на героя.

За да решите това, просто задайте shiftOnUserGestures на true и на двата джаджа Hero. Това е невярно по подразбиране.

Hero (
  таг: "DemoTag",
  дете: Икона (
    Icons.add,
  ),
  tranzOnUserGestures: вярно,
),

А това ще задейства героични анимации и при прекарване на заден ход.

Това е за тази статия! Надявам се, че ви е харесало, и оставете няколко хлопки, ако сте го направили. Следвайте ме за още статии на Flutter и коментирайте всякаква обратна връзка, която може да имате относно тази статия.

Чувствайте се свободни да разгледате и другите ми профили и статии:

кикотене

GitHub

Някои от другите ми статии