在 Jetpack Compose 中实现后退导航

Question

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

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

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

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

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

Answer 1

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

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

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

Attempts to pop the controller's back stack. Analogous to when the user presses the system Back button when the associated navigation host has focus.

在 Jetpack Compose 中实现后退导航

Implementing back navigation in Jetpack Compose

navigation

android

kotlin

android-jetpack-compose