Панель навигации

Панель навигации позволяет пользователям переключаться между разделами приложения. Ее следует использовать для:

• Три–пять пунктов назначения, имеющих одинаковое значение
• Компактные размеры окон
• Единые целевые страницы на разных экранах приложения

В этой статье рассказывается, как добавить в приложение панель навигации с экранами и основными элементами навигации.

Поверхность API

Используйте компоненты NavigationBar и NavigationBarItem, чтобы реализовать логику переключения между пунктами назначения. Каждый объект NavigationBarItem представляет собой отдельный пункт назначения.

NavigationBarItem включает следующие ключевые параметры:

• selected: определяет, выделен ли текущий элемент визуально.
• onClick() – определяет действие, которое будет выполнено, когда пользователь нажмет на элемент. Здесь должна быть логика обработки событий навигации, обновления состояния выбранного элемента или загрузки соответствующего контента.
• label – отображает текст в элементе. Необязателен.
• icon – показывает значок в элементе. Необязателен.

Пример: панель навигации внизу экрана

В следующем фрагменте кода реализована нижняя панель навигации с элементами, позволяющими пользователям переходить между разными экранами приложения:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

Основные положения

• NavigationBar – коллекция объектов, каждый из которых соответствует Destination.
• val navController = rememberNavController() создает и запоминает экземпляр NavHostController, который управляет навигацией в NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } управляет статусом выбранного объекта.
  • startDestination.ordinal получает числовой индекс (позицию) записи перечисления Destination.SONGS.
• Когда пользователь нажимает на элемент, вызывается метод navController.navigate(route = destination.route), чтобы перейти к соответствующему экрану.
• Лямбда-функция onClick из NavigationBarItem обновляет состояние selectedDestination, чтобы визуально выделить нажатый элемент.
• Логика навигации вызывает функцию AppNavHost, передавая ей navController и startDestination, чтобы отобразить контент выбранного экрана.

Результат

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

Дополнительные ресурсы

• Панель навигации Material 3
• Навигация с помощью Compose