Перейти к основному содержимому

Обзор

Навигация в FlutterFlow является важным аспектом разработки приложений, позволяя пользователям перемещаться между различными страницами или экранами. Это достигается с помощью системы маршрутизации, где каждой странице присваивается уникальный идентификатор маршрута. Понимание того, как работает навигация и что происходит со стеком навигации под капотом, может помочь в создании безупречного пользовательского опыта.

Что такое Маршруты?

Маршруты в основном представляют собой пути, которые определяют различные экраны или страницы в приложении. Каждый маршрут связан с определенным экраном и имеет уникальный идентификатор, который позволяет приложению распознать и перейти к нему. Например, маршрут может указывать на главный экран, страницу с подробной информацией о продукте или страницу профиля пользователя.

СтраницаМаршрут
Главная страница/home
Детали продукта/product-details
Корзина/cart

Логика Стека Навигации

Стек навигации - это структура данных, которая отслеживает маршруты при их добавлении и удалении из стека. Он следует принципу "Последним вошел, первым вышел" (LIFO), что означает, что последний экран, на который было выполнено переход, является первым, который закрывается при нажатии пользователем кнопки "назад".

Вот как работает логика стека навигации в FlutterFlow:

1. Добавление маршрута

При переходе на новый экран этот маршрут добавляется на вершину стека.

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

pushroute.avif

2. Удаление маршрута

При возврате назад верхний маршрут удаляется из стека, и предыдущий экран становится видимым.

Например, если вы находитесь на экране профиля и нажимаете кнопку "назад", маршрут экрана профиля удаляется, и открывается главный экран.

poproute.avif

3. Замена маршрута

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

Например, после успешного входа в систему замените маршрут экрана входа маршрутом главного экрана.

replaceroute.avif

Действия Навигации

В FlutterFlow есть три основных действия навигации, которые вы можете использовать для перехода между различными экранами в вашем приложении. Вот они:

  1. Перейти к (Добавить маршрут)
  2. Назад (Удалить маршрут)
  3. Заменить маршрут

1. Перейти к (Добавить маршрут)

Это действие включает переход к новому экрану путем добавления нового маршрута в стек навигации.

Что происходит внутри:

  • При добавлении маршрута новый экран размещается поверх текущего стека. Это означает, что текущий экран все еще находится в стеке, но не виден пользователю.
  • Новый экран становится активным экраном, с которым пользователь взаимодействует.
к сведению

Узнайте больше о добавлении этого действия здесь.

2. Назад (Удалить маршрут)

Это действие включает возврат к предыдущему экрану путем удаления текущего маршрута из стека навигации.

Что происходит внутри:

  • При удалении маршрута текущий экран удаляется из стека, и предыдущий становится снова активным.
  • Это действие эффективно отменяет последнюю операцию добавления.
к сведению

Узнайте больше о добавлении этого действия здесь.

3. Заменить маршрут

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

Что происходит внутри:

  • Текущий экран удаляется из стека, и новый экран добавляется на его место.
к сведению
  • Это полезно, когда вы хотите предотвратить пользователей от возвращения к предыдущему экрану.
  • Это действие по сути является действием Перейти к с включенной опцией Заменить маршрут. Узнайте больше о добавлении этого действия здесь.