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

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

  • Пункты назначения верхнего уровня, которые должны быть доступны в любой точке приложения
  • От трех до семи основных направлений
  • Макеты для планшета или настольного компьютера
Вертикальная навигационная панель в левой части экрана с четырьмя пунктами назначения (Все файлы, Недавние, Фотографии и Библиотека), каждый из которых имеет соответствующий значок и плавающую кнопку действия.
Рисунок 1. Навигационная панель с четырьмя пунктами назначения и плавающей кнопкой действия.

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

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 пунктами назначения с соответствующими значками: Песни, Альбом и Плейлист. Значки визуально указывают на назначение каждой кнопки навигации в панели. Каждому пункту назначения соответствует соответствующий значок (например, музыкальная нота для
Рисунок 2. Навигационная панель, содержащая 3 пункта назначения с соответствующими значками: «Песни», «Альбом» и «Плейлист».

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

,

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

  • Пункты назначения верхнего уровня, которые должны быть доступны в любой точке приложения
  • От трех до семи основных направлений
  • Макеты для планшета или настольного компьютера
Вертикальная навигационная панель в левой части экрана с четырьмя пунктами назначения (Все файлы, Недавние, Фотографии и Библиотека), каждый из которых имеет соответствующий значок и плавающую кнопку действия.
Рисунок 1. Навигационная панель с четырьмя пунктами назначения и плавающей кнопкой действия.

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

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 пунктами назначения с соответствующими значками: Песни, Альбом и Плейлист. Значки визуально указывают на назначение каждой кнопки навигации в панели. Каждому пункту назначения соответствует соответствующий значок (например, музыкальная нота для
Рисунок 2. Навигационная панель, содержащая 3 пункта назначения с соответствующими значками: «Песни», «Альбом» и «Плейлист».

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