从顶部应用栏导航

本指南演示了如何让顶部应用栏中的导航图标执行导航操作。

示例

以下代码段是一个最小示例，展示了如何实现带有功能导航图标的顶部应用栏。在本例中，该图标会将用户带到应用中的上一个目的地：

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}
AppBar.kt

代码要点

请注意以下示例中的以下内容：

  • 可组合项 TopBarNavigationExample 定义了一个类型为 () -> Unit 的参数 navigateBack。
  • 它会为 CenterAlignedTopAppBar 的 navigationIcon 参数传递 navigateBack。

因此，每当用户点击顶部应用返回中的导航图标时，都会调用 navigateBack()。

传递函数

此示例使用返回箭头作为图标。因此，navigateBack() 的参数应将用户带到上一个目的地。

为此，请将对 NavController.popBackStack() 的调用传递给 TopBarNavigationExample。您可以在构建导航图时执行此操作。例如：

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

其他资源

如需详细了解如何在应用中实现导航，请参阅以下系列指南：