Навигационный рельс

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

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

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

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

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

Используйте компонент 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 , чтобы визуально выделить выбранный элемент рельса.
• Он вызывает компонуемый AppNavHost , передавая navController и startDestination , чтобы отобразить фактическое содержимое выбранного экрана.

Результат

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

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

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