Вкладки

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

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

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

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

Используйте компоненты Tab, PrimaryTabRow и SecondaryTabRow, чтобы реализовать вкладки. Компонуемый элемент Tab представляет собой отдельную вкладку в строке и обычно используется внутри элемента PrimaryTabRow (для вкладок с основными показателями) или SecondaryTabRow (для вкладок с дополнительными показателями).

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

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

Результат

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

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

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