从顶部应用栏导航

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

示例

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

@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()的参数应将用户带到上一个目的地。

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

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

其他资源

有关如何在您的应用中实现导航的更多信息，请参阅以下指南系列：