在 Jetpack Compose 中实现后退导航答案

【问题标题】：Implementing back navigation in Jetpack Compose在 Jetpack Compose 中实现后退导航
【发布时间】：2021-10-04 18:58:47
【问题描述】：

我有一个带有IconButton 的顶部栏，用于在单击时处理返回导航。

作为回调传递的函数是这样实现的：

private fun navigateBack(navController: NavController) {
    val route = navController.previousBackStackEntry?.destination?.route ?: ""
    navController.navigate(route)
}

不幸的是，它与图片中显示的默认android底部导航不同

有没有办法实现与底部系统导航相同的后退导航？

【问题讨论】：

标签： android kotlin navigation android-jetpack-compose

【解决方案1】：

您可以将您的NavController 传递给您的TopAppBar，并在导航图标中使用navController.navigateUp()。

如果您只想在某些可组合项中显示此图标，您可以使用参数，如以下示例中的 canPop，并在您要处理后退按钮的可组合项中将其设置为 true。

if (canPop) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = {
                navController.navigateUp()
            }) {
                Icon(Icons.Rounded.ArrowBack, "")
            }
        },
        backgroundColor = MaterialTheme.colors.TopBarColor)
} else {
    TopAppBar(
        title = { Text(text = title) },
        backgroundColor = MaterialTheme.colors.TopBarColor
    )
}

也检查popBackStack documentation

尝试弹出控制器的回栈。类似于当关联的导航主机具有焦点时，用户按下系统返回按钮。

【讨论】：

代码中的canPop是什么？
@Paul9999 这只是我用来确定屏幕是否应该有后退导航按钮的变量。这在问题的上下文中并不重要。