侧边导航栏

侧边导航栏可让用户访问在大屏设备上运行的应用中的目标页面。您应该将侧边导航栏用于以下用途：

  • 需要可在应用中的任何位置访问的顶级目标页面
  • 三到七个主要目标页面
  • 平板电脑或桌面设备布局
屏幕左侧的垂直导航栏，包含四个目的地（“所有文件”“最近”“照片”和“媒体库”），每个目的地都附带一个相关联的图标，以及一个悬浮操作按钮。
图 1.一个包含四个目标页面和一个悬浮操作按钮的侧边导航栏。

本页面介绍了如何在应用中显示侧边导航栏，以及相关界面和基本导航。

API Surface

将 NavigationRail 可组合项与 NavigationRailItem 结合使用，可在应用中实现侧边导航栏。NavigationRailItem 表示侧边导航栏列中的单个侧边导航栏项。

NavigationRailItem 包含以下关键参数：

  • selected：确定当前侧边导航栏项是否以视觉方式突出显示。
  • onClick()：一个必需的 lambda 函数，用于定义用户点击侧边导航栏项时要执行的操作。您通常在此处处理导航事件、更新所选侧边导航栏项的状态或加载相应内容。
  • label：在侧边导航栏项中显示文本。可选。
  • icon：在侧边导航栏项中显示图标。可选。

示例：基于侧边导航栏的导航

以下代码段实现了一个导航栏，以便用户可以在应用中的不同界面之间导航：

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

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

要点

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

结果

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

一个垂直的导航栏，包含 3 个目的地及其关联的图标：“歌曲”“专辑”和“播放列表”。图标直观地指示了轨道中每个导航按钮的用途。每个目的地都配有相关图标（例如，音乐目的地配有音符图标，
图 2.一个包含 3 个目标页面（歌曲、专辑和播放列表）以及关联图标的侧边导航栏。

其他资源