Вкладки

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

  • Основные вкладки : расположены в верхней части панели контента под верхней панелью приложения. На них отображаются основные разделы контента, и их следует использовать, когда необходим только один набор вкладок.
  • Дополнительные вкладки : используются в области контента для дальнейшего разделения связанного контента и установления иерархии. Они необходимы, когда экран требует более одного уровня вкладок.
Отображаются 3 основные вкладки с соответствующими значками (Рейсы, Поездки и Исследование). Отображаются 2 дополнительные вкладки (Обзор, Технические характеристики) без соответствующих значков.
Рисунок 1. Основные вкладки (1) и дополнительные вкладки (2).

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

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

Для реализации вкладок используйте составные объекты Tab , PrimaryTabRow и SecondaryTabRow . Составной объект Tab представляет собой отдельную вкладку в строке и обычно используется внутри PrimaryTabRow (для основных вкладок-индикаторов) или SecondaryTabRow (для второстепенных вкладок-индикаторов).

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

  • selected : Определяет, будет ли текущая вкладка визуально выделена.
  • onClick() : Обязательная лямбда-функция, определяющая действие, которое должно быть выполнено при щелчке пользователя по вкладке. Здесь обычно обрабатываются события навигации, обновляется состояние выбранной вкладки или загружается соответствующий контент.
  • text : Отображает текст на вкладке. Необязательно.
  • icon : Отображает значок на вкладке. Необязательно.
  • enabled : Определяет, включена ли вкладка и можно ли с ней взаимодействовать. Если установлено значение false, вкладка отображается в неактивном состоянии и не реагирует на щелчки.

Пример: навигация по вкладкам

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

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Ключевые моменты

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

Результат

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

Три вкладки расположены горизонтально в верхней части экрана приложения. Это вкладки «Песни», «Альбом» и «Плейлист», при этом вкладка «Песни» выделена и подчеркнута.
Рисунок 2. Три вкладки — «Песни», «Альбом» и «Плейлист» — расположены горизонтально.

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