Более одной плавающей кнопки действия на одной странице

Привет мобильным разработчикам!! Флаттер уже стал горячей темой. И мне он тоже нравится (Хотя он не поддерживает отражения и ORM 😔 😔)

В любом случае, при разработке страницы (макета действий) я хотел иметь две плавающие кнопки действий (FAB). И мы видели приложения с этим, даже мы видели приложения с плавающим меню действий.

Две Фабы

Что ж, давайте посмотрим на Flutter. Flutter великолепен, он дает именованный параметр в виджете Scaffold ‘floatingActionButton’. Просто дайте объекту плавающую кнопку действия, и все готово.

И вот, по умолчанию он помещает fab в нижний конец.

FAB по умолчанию нижнее конечное положение

Так что, если я хочу дать два FAB или три FAB или больше?

Ну, есть только один именованный параметр ‘floatingActionButton’. Означает ли это, что мы не можем добавить более одного FAB на страницу. 🤔

Что ж !! вещь называется параметром «плавающая кнопка действия» не принимает FloatingActionbutton в качестве параметра, он принимает виджет в качестве параметра

Из scaffold.dart

Так как именованный параметр принимает виджет, мы можем взять виджет Column (для вертикального выравнивания) или виджет Row (для горизонтального выравнивания).

И это все, и мы получаем это

Два FAB на первом экране

Довольно легко, верно?

Итак, если я хочу, чтобы эта страница (содержащая два FAB) была моим вторым экраном, подобным этому

Первый и второй экран

Это должно было сделать это, но я действительно получил это

Тада !! идеальный черный экран. Как красиво !! и это пришло с этим прекрасным сообщением

Консольное сообщение

Вот в чем дело! , герой Теги . Перед этим давайте посмотрим, что такое анимация героев.

Пример анимации героя

Анимация героев позволяет виджету (который присутствует на двух экранах, но в двух разных положениях) летать или перемещаться с предыдущей позиции на следующую с красивой анимацией.

Теги героев — это просто уникальные идентификаторы для идентификации виджетов героев (виджетов, которые могут выполнять анимацию героев).

Но ни мои FAB не присутствуют на двух экранах, ни они не Hero Widgets, то….

На самом деле FAB содержит в себе Hero Widget, поэтому Hero Tag. Если явно не указан heroTag , то он дает heroTag по умолчанию. И в этом проблема, флаттер дал моим двум FAB идентичные (по умолчанию) heroTags . Отсюда и конфликт.

Во время перехода на другой экран (маршрутизация страниц) фреймворк ищет виджеты Hero с помощью тегов Hero. Теперь два FAB имеют одинаковые теги героев (по умолчанию), это вызвало конфликт.

Простой !!

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

И вы получите свои FAB на следующей странице.

Если вы хотите анимацию героя и более двух FAB, просто дайте разные теги героя. Например, от 0 до FAB1 и от 1 до FAB2, и вы также получите прекрасную анимацию героев.

Надеюсь, это помогло. И если вам это нравится то 👏 , а пока продолжайте порхать

Кампания 🍺 !!