gpt4 book ai didi

android - Jetpack Compose - 如果具有嵌套导航,则不会选择底部导航图标

转载 作者:行者123 更新时间:2023-12-05 06:03:26 27 4
gpt4 key购买 nike

我想要一个包含两个项目/屏幕的底部导航栏:订单和帐户。订单是起始目的地。 Order 有自己的导航,它有两个屏幕:ItemList 和 ItemDetail。当在 ItemList 屏幕中单击一个项目时,ItemDetail 打开。

当我运行该应用程序时,我可以看到 ItemList 屏幕,但未选中底部导航栏中的 Order 项目。如果我点击帐户项目,我可以看到帐户屏幕,并且在底部导航栏中选择了帐户项目。

我认为这是由于重组而发生的:当在开始时选择 Order 因为它是起始目的地,它的嵌套图被调用并导航到一个新的目的地(ItemList),引导重组,使用 currentRoute 是“itemList”而不是“order”。

如何在底部导航栏中选择订单图标?是否有建议使用底部导航处理嵌套图?

这是我目前拥有的:

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()
}
}
}

最佳答案

这是我写的 article有一个类似的例子。它是葡萄牙语的,但如果您将页面翻译成英语,您就会明白...此外,您还可以找到来源 here .

我认为问题的发生是因为您在整个应用程序中只使用了一个 NavHost。事实上,我猜你需要为每个选项卡使用一个 NavHost,然后当用户选择一个选项卡时,你必须更改当前的 NavHost

哦!我的文章是基于这篇文章 here ,这也可以帮助您。

关于android - Jetpack Compose - 如果具有嵌套导航,则不会选择底部导航图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66645553/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com