Боковая панель навигации

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

• Основные разделы, которые должны быть доступны в любой части приложения.
• от трех до семи основных пунктов назначения;
• Макеты для планшетов и компьютеров

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

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

Используйте composable-функцию NavigationRail вместе с функцией NavigationRailItem, чтобы реализовать в приложении боковую панель. NavigationRailItem – отдельный элемент в столбце с рекомендациями.

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

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

Пример: навигация на основе направляющих

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

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

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

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

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

Результат

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

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

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