Jetpack Compose - 如果有嵌套導航，則不選擇底部導航圖標

Question

我想要一個帶有兩個項目/屏幕的底部導航欄：訂單和帳戶。 訂單是起點。 Order 有自己的導航，它有兩個屏幕：ItemList 和 ItemDetail。 在 ItemList 屏幕中單擊項目時，會打開 ItemDetail。

當我運行應用程序時，我可以看到 ItemList 屏幕，但未選擇底部導航欄中的 Order 項目。 如果我單擊帳戶項目，我可以看到帳戶屏幕，並且在底部導航欄中選擇了帳戶項目。

我認為這是由於重組而發生的：當 Order 在開始時被選擇時，因為它是起始目的地，它的嵌套圖被調用並導航一個新的目的地（ItemList），引導重組， currentRoute是“itemList”而不是比“命令”。

如何在底部導航欄中選擇訂單圖標？ 有沒有推薦的如何處理帶有底部導航的嵌套圖？

這就是我目前所擁有的：

object Destinations {
    const val ORDER_ROUTE = "order"
    const val ACCOUNT_ROUTE = "account"
    const val ITEM_LIST_ROUTE = "itemList"
    const val ITEM_DETAIL_ROUTE = "itemDetail"
    const val ITEM_DETAIL_ID_KEY = "itemId"
}

class NavigationActions(navController: NavHostController) {
    val selectItem: (Long) -> Unit = { itemId: Long ->
        navController.navigate("${Destinations.ITEM_DETAIL_ROUTE}/$itemId")
    }
    val upPress: () -> Unit = {
        navController.navigateUp()
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Compose
fun MyApp() {
    MyAppTheme {
        val navController = rememberNavController()

        val tabs = listOf(Destinations.ORDER_ROUTE, Destinations.ACCOUNT_ROUTE)

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)

        Scaffold(
            bottomBar = {
                BottomNavigation {
                    tabs.forEach { tab ->
                        BottomNavigationItem(
                            icon = { Icons.Filled.Favorite },
                            label = { Text(tab) },
                            selected = currentRoute == tab,
                            onClick = {
                                navController.navigate(tab) {
                                    popUpTo = navController.graph.startDestination
                                    launchSingleTop = true
                                }
                            },
                            alwaysShowLabel = true,
                            selectedContentColor = MaterialTheme.colors.secondary,
                            unselectedContentColor = LocalContentColor.current
                        )
                    }
                }
            }
        ) {
            NavGraph(navController)
        }
    }
}

@Composable
fun NavGraph(
    navController: NavHostController,
    startDestination: String = Destinations.ORDER_ROUTE
) {
    val actions = remember(navController) { NavigationActions(navController) }

    NavHost(navController = navController, startDestination = startDestination) {
        navigation(startDestination = Destinations.ITEM_LIST_ROUTE, route = Destinations.ORDER_ROUTE) {
            composable(Destinations.ITEM_LIST_ROUTE) {
                ItemList(actions.selectItem)
            }
            composable(
                "${Destinations.ITEM_DETAIL_ROUTE}/{$Destinations.ITEM_DETAIL_ID_KEY}",
                arguments = listOf(navArgument(Destinations.ITEM_DETAIL_ID_KEY) {
                    type = NavType.LongType
                })
            ) {
                ItemDetail()
            }
        }
        composable(Destinations.ACCOUNT_ROUTE) {
            Account()
        }
    }
}

Answer 1

我用一個類似的例子寫了這篇文章。 它是葡萄牙語的，但如果您將頁面翻譯成英語，您就會明白……此外，您可以在此處找到資源。

我認為問題正在發生，因為您在整個應用程序中只使用了一個NavHost 。 其實我猜你需要為每個tab使用一個NavHost ，那么當用戶select一個tab時，你必須改變當前的NavHost 。

哦！ 我的文章是基於這里的這篇文章，它也可以幫助你。