标签页

标签页允许您整理相关内容组。标签页有两种类型

  • 主标签页：放置在内容窗格顶部、顶部应用栏下方。它们显示主要内容目的地，并且应该在只需要一组标签页时使用。
  • 辅助标签页：在内容区域内使用，以进一步分隔相关内容并建立层级。当屏幕需要多层标签页时，它们是必要的。
3 primary tabs are shown with associated icons (Flights, Trips, and Explore). 2 secondary tabs are shown (Overview, Specifications) without associated icons.
图 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 枚举条目的数字索引（位置）。
  • 当您点击标签页时，onClick lambda 调用 navController.navigate(route = destination.route) 以导航到相应的屏幕。
  • Tab 的 onClick lambda 更新 selectedDestination 状态以视觉上高亮显示被点击的标签页。
  • 它调用 AppNavHost 可组合项，传入 navController 和 startDestination，以显示所选屏幕的实际内容。

结果

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

3 tabs arranged horizontally across the top of the app screen. The tabs are Songs, Album, and Playlist, with the Songs tab selected and underlined.
图 2. 三个标签页——歌曲、专辑和播放列表——水平排列。

其他资源