导航栏

借助导航栏，用户可以在应用中的不同目的地之间切换。您 应该将导航栏用于：

  • 三到五个同等重要的目的地
  • 紧凑的窗口大小
  • 应用屏幕上的一致目的地
包含 4 个目的地的导航栏。每个目的地都有一个名为“标签”的占位名称，其中所选目的地会显示为圆形图标，其余目的地则显示为三角形。
图 1.包含 4 个目的地的导航栏。

本页面介绍了如何在应用中显示导航栏，其中包含相关屏幕和基本导航。

API Surface

使用 NavigationBar 和 NavigationBarItem 可组合项来 实现目的地切换逻辑。每个 NavigationBarItem 都代表一个单独的目的地。

NavigationBarItem 包含以下关键参数：

  • selected：确定当前项是否以视觉方式突出显示。
  • onClick()：定义用户点击该项时要执行的操作。用于处理导航事件、更新所选项状态或加载相应内容的逻辑属于此处。
  • label：在项内显示文本。可选。
  • icon：在项内显示图标。可选。

示例：底部导航栏

以下代码段实现了一个包含项的底部导航栏，以便用户可以在应用中的不同屏幕之间导航：

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

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

要点

  • NavigationBar 显示一系列项，每个项对应一个 Destination。
  • val navController = rememberNavController() 会创建并记住 NavHostController 的实例，该实例用于管理 NavHost 中的导航。
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } 用于管理所选项的状态。
    • startDestination.ordinal 用于获取 Destination.SONGS 枚举条目的数字索引（位置）。
  • 点击某个项时，系统会调用 navController.navigate(route = destination.route) 以导航到相应屏幕。
  • NavigationBarItem 的 onClick lambda 会更新 selectedDestination 状态，以视觉方式突出显示点击的项。
  • 导航逻辑会调用 AppNavHost 可组合项，并传递 navController 和 startDestination，以显示所选屏幕的实际内容。

结果

下图显示了上一个代码段生成的导航栏：

应用界面，底部导航栏中横向列出了 3 个目的地：“歌曲”“专辑”和“播放列表”。每个目的地都配有相关图标（例如，“歌曲”配有音符）。
图 2.包含 3 个目的地（歌曲、专辑和播放列表）及其关联图标的导航栏。

其他资源