PricingLoginStart free
Jetpack Compose Academy · Урок

Выделение выбранного маршрута

Синхронизируйте выбор со стеком возврата.

Урок 2 из 413 шагов

«Выделение выбранного маршрута» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Выбор должен быть настоящим

Вкладка должна подсвечиваться в зависимости от фактического положения пользователя, а не от значения, заданного вручную. Стек возврата — источник истины. 🧭

Прочитайте текущую запись

Запросите у NavController актуальное состояние currentBackStackEntryAsState. Оно автоматически обновляется при каждом изменении навигации.

val entry by navController.currentBackStackEntryAsState()

Получите активный маршрут

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

val route = entry?.destination?.route

Сравните, чтобы отметить выбор

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

selected = route == tab.route

Иерархия важнее равенства

Для вложенных графов точного равенства может быть недостаточно. Проверка иерархии назначения отмечает вкладку активной даже на её дочерних экранах.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Переходите по нажатию

В onClick вызовите navController.navigate с маршрутом вкладки, чтобы перейти к ней. После этого выбор будет самостоятельно следовать стеку возврата.

onClick = { navController.navigate(tab.route) }

Не создавайте копии в стеке

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

navController.navigate(tab.route) {
  launchSingleTop = true
}

Возвращайтесь к началу

Нажатие кнопки «Назад» на любой вкладке должно возвращать на главную вкладку, а не последовательно проходить все посещённые вкладки. Для этого используйте popUpTo начального назначения.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Настройте цвет активной вкладки

NavigationBarItem автоматически меняет цвет выбранного элемента, но Вы можете настроить его с помощью colors, чтобы активная вкладка соответствовала стилю приложения.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Видимость подписей

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

alwaysShowLabel = false

Один реактивный цикл

Соберите всё вместе: один раз прочитайте маршрут, а затем в forEach сравните с ним каждую вкладку. Теперь выбор идеально отражает навигацию.

Быстрая проверка

Вы связали выбор со стеком возврата. Один короткий вопрос.

Ответь в интерактивном уроке

Повторение

Вы синхронизировали подсветку со стеком возврата: прочитали текущий маршрут, сравнили его для каждой вкладки и настроили переход с помощью launchSingleTop и popUpTo. Теперь выбор всегда соответствует действительности. 🎯

Можно начать бесплатно

Изучай Kotlin с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
30
Уроки
120
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Выделение выбранного маршрута» бесплатный?

Да — полный текст урока «Выделение выбранного маршрута» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Выделение выбранного маршрута»?

Синхронизируйте выбор со стеком возврата. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Выделение выбранного маршрута»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. NavigationBar с несколькими вкладками
  2. Выделение выбранного маршрута
  3. Сохранение состояния вкладок при переключении
  4. TabRow и страницы с перелистыванием
← Назад к Jetpack Compose Academy