使用 BottomNavigation 导航 topAppBar

Question

我在 topAppBar 中显示后退按钮时遇到问题。我有 bottomNavigation for Home 和最喜欢的自行车。当我想显示自行车的详细信息时，我希望向后箭头返回。

底部导航图：

NavHost(
    navController =navController,
    startDestination = Screen.Home.route
){
    composable(route = Screen.Home.route){
        HomeScreen(navController = navController)
    }
    composable(route = Screen.Favorite.route){
        FavoriteScreen(navController = navController)
    }
    composable(route = Screen.Details.route){
        val bike = navController.previousBackStackEntry?.savedStateHandle?.get<Bike>("bike")

        bike?.let{
            BikeDetaliScreen(navController = navController, movie)
        }

    }

和 TopAppBar：

if(navController.previousBackStackEntry != null){
        TopAppBar(
            title = {
                Box(modifier = Modifier.fillMaxWidth()
                ) {
                    Image(
                        painterResource(
                            id = R.drawable.bike_logo
                        ),
                        "Logo picture",
                        modifier = Modifier
                            .size(130.dp)
                            .align(Alignment.Center)
                    )
                }
            },
            backgroundColor = Color(0xFF0B253F)
        )
    }

问题是我只想在详细信息屏幕中有后退箭头，而不是在主页或收藏夹中。但是当我使用 previousBackStackEntry != null somethimes 最喜欢的屏幕有箭头，因为它在堆栈中有 homeScreen。

Answer 1

您可以观察当前的后退堆栈条目和show/hide相应的后退按钮。

// When you navigate to another screen, this value is updated.
val currentRoute = navController
    .currentBackStackEntryFlow
    .collectAsState(initial = navController.currentBackStackEntry)

val showBackButton = when (currentRoute.value?.destination?.route) {
    Screen.Home.route -> false
    else -> true
}

TopAppBar(
    ...
    navigationIcon = {
        if (showBackButton) {
            IconButton(
                onClick = { ... }
            ) { Icon(Icons.Default.ArrowBack, "Back") }
        }
    }
)

使用 BottomNavigation 导航 topAppBar

Navigation topAppBar with BottomNavigation

navigation

android-jetpack-compose