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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

• Три-пять направлений одинаковой важности
• Компактные размеры окон
• Согласованные пункты назначения на экранах приложений

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

поверхность 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) } управляет состоянием текущего выбранного элемента.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } управляет состоянием текущего выбранного элемента.
  • startDestination.ordinal получает числовой индекс (позицию) записи перечисления Destination.SONGS .
• При щелчке по элементу вызывается navController.navigate(route = destination.route) для перехода к соответствующему экрану.
• Лямбда onClick элемента NavigationBarItem обновляет состояние selectedDestination , чтобы визуально выделить выбранный элемент.
• Он вызывает компонуемый AppNavHost , передавая navController и startDestination , чтобы отобразить фактическое содержимое выбранного экрана.

Результат

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

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

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