标签页

借助标签页，您可以整理相关内容的群组。标签页分为两种：

  • 主要标签页：位于内容窗格的顶部，位于顶部应用栏下方。 它们用于显示主要内容目的地，并且应仅在需要一组标签页时使用。
  • 次级标签页：在内容区域内使用，用于进一步分隔相关内容并建立层次结构。如果屏幕需要多个级别的标签页，则必须使用标签页标签。
系统会显示 3 个主要标签页，并带有相关图标（航班、行程和探索）。系统会显示 2 个辅助标签页（“概览”“规格”），但没有关联的图标。
图 1. 主要标签页 (1) 和次要标签页 (2)。

本页介绍了如何在应用中显示主要标签页以及相关屏幕和基本导航栏。

API Surface

使用 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 枚举条目的数字编号（位置）。
  • 点击某个标签页时，系统会调用 navController.navigate(route = destination.route) 以导航到相应的屏幕。
  • Tab 的 onClick lambda 会更新 selectedDestination 状态，以直观地突出显示被点击的标签页。
  • 它会调用 AppNavHost 可组合项，传递 navController 和 startDestination，以显示所选屏幕的实际内容。

结果

下图显示了上一个代码段的结果：

3 个标签页水平排列在应用屏幕顶部。标签页包括“歌曲”“专辑”和“播放列表”，其中“歌曲”标签页处于选中状态并带有下划线。
图 2. 3 个标签页（歌曲、专辑和播放列表）横向排列。

其他资源