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

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

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

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

API surface

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

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

• selected: определяет, выделен ли текущий элемент на панели визуально.
• onClick() – обязательная лямбда-функция, которая определяет действие, выполняемое при нажатии на элемент. Здесь вы обычно обрабатываете события навигации, обновляете состояние выбранного элемента панели или загружаете соответствующий контент.
• 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, чтобы визуально выделить выбранный элемент панели.
• Она вызывает composable-функцию AppNavHost, передавая navController и startDestination, чтобы показать контент выбранного экрана.

Результат

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

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

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