Android Jetpack Compose-如果具有嵌套导航,则不选择底部导航图标
我想要一个底部导航栏,有两个项目/屏幕:订单和账户。订单是起点和终点。订单有自己的导航,它有两个屏幕:ItemList和ItemDetail。在ItemList屏幕中单击项目时,ItemDetail打开 当我运行应用程序时,我可以看到ItemList屏幕,但底部导航栏中的Order item未被选中。如果我点击Account item,我可以看到Account屏幕,并且Account item在底部导航栏中被选中 我认为这是因为重新编译:当Order在开始时被选中,因为它是起始目的地,它的嵌套图被调用,新的目的地(ItemList)被导航,导致重新编译,Android Jetpack Compose-如果具有嵌套导航,则不选择底部导航图标,android,android-navigation,android-jetpack-compose,android-bottomnav,Android,Android Navigation,Android Jetpack Compose,Android Bottomnav,我想要一个底部导航栏,有两个项目/屏幕:订单和账户。订单是起点和终点。订单有自己的导航,它有两个屏幕:ItemList和ItemDetail。在ItemList屏幕中单击项目时,ItemDetail打开 当我运行应用程序时,我可以看到ItemList屏幕,但底部导航栏中的Order item未被选中。如果我点击Account item,我可以看到Account屏幕,并且Account item在底部导航栏中被选中 我认为这是因为重新编译:当Order在开始时被选中,因为它是起始目的地,它的嵌套图
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()
}
}
}
我用一个类似的例子写了这篇文章。它是葡萄牙语的,但是如果你把这页翻译成英语,你就会明白。。。此外,您还可以找到来源
我认为问题的出现是因为整个应用程序只使用了一个NavHost
。事实上,我猜您需要为每个选项卡使用一个NavHost
,然后当用户选择选项卡时,您必须更改当前的NavHost
哦!!我的文章是基于这篇文章,这也可以帮助你