如何在使用同伴导航动画时隐藏Jetpack组合中的底部栏
Situation
我正在用Kotlin & Android Jetpack Compose编写一个非常简单的应用程序
我有一个scaffold，它包含我的navHost和bottomBar。我可以使用那个bottomBar在三个主屏幕之间导航。其中一个主屏幕有一个详细的屏幕，不应该显示一个bottomBar。
我的代码
到目前为止，这只是小菜一碟：
// MainActivitys onCreate
setContent {
val navController = rememberAnimatedNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast("/")
BottomBarNavTestTheme {
Scaffold(
bottomBar = {
if (currentRoute?.substringBeforeLast("/") == Screen.Detail.route) {
MyBottomNavigation(
navController,
currentRoute,
listOf(Screen.Dashboard, Screen.Map, Screen.Events) // main screens
)
}
}
) { innerPadding ->
NavHost( // to be replaced by AnimatedNavHost
navController = navController,
startDestination = Screen.Dashboard.route,
modifier = Modifier.padding(innerPadding)
) {
composable(Screen.Dashboard.route) { DashboardScreen() }
composable(Screen.Map.route) { MapScreen { navController.navigate(Screen.Detail.route) } }
composable(Screen.Events.route) { EventsScreen() }
composable(Screen.Detail.route) { MapDetailScreen() }
}
}
}
}问题
我希望在屏幕之间进行转换，所以我使用伴奏者航海动画：只需将NavHost替换为AnimatedNavHost。
当从mainScreen导航到detailScreen时，有一个奇怪的效果：
- bottomBar隐藏
- 主屏幕调整大小：(请参阅底部对齐的文本)
- 动画到细节屏幕发生。
这看起来很糟，我该怎么解决呢？
溶液
最佳解决方案如下所示：
- 主屏幕保持底部栏和淡出。
- 同时，详细信息页进入时没有底部栏。
回答 4
Stack Overflow用户
发布于 2022-03-31 13:54:50
确保初始化navController和navHostEngine.Create --一个包含要添加到底部navigation.within中的UI对象的密封类--脚手架，添加底部栏，遍历底部导航项，并检查每个条目是否具有路由目标，如果为真，则添加具有指定数据的底部导航。
val navController = rememberNavController()
val navHostEngine = rememberNavHostEngine()
val bottomNavigationItems: List<BottomNavItem> = listOf(
BottomNavItem.MainScreen,
BottomNavItem.FavoriteScreen,
BottomNavItem.UserScreen
)
Scaffold(
bottomBar = {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val route = navBackStackEntry?.destination?.route
bottomNavigationItems.forEach { item ->
if (item.destination.route == route) {
BottomNavigation(
backgroundColor = Color.White,
contentColor = Color.Black
) {
bottomNavigationItems.forEach { item ->
BottomNavigationItem(
icon = {
Icon(
imageVector = item.icon,
contentDescription = null
)
},
label = {
Text(text = item.title)
},
alwaysShowLabel = false,
selectedContentColor = green,
unselectedContentColor = Color.LightGray,
selected = currentDestination?.route?.contains(item.destination.route) == true,
onClick = {
navController.navigate(item.destination.route) {
navController.graph.startDestinationRoute?.let { screenRoute ->
popUpTo(screenRoute) {
saveState = true
}
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
}
}
) {
paddingValues ->
Box(
modifier = Modifier.padding(paddingValues)
) {
DestinationsNavHost(
navGraph = NavGraphs.root,
navController = navController,
engine = navHostEngine
)
}
}Stack Overflow用户
发布于 2022-11-09 14:48:22
到目前为止，我找到的最佳解决方案是为每个屏幕设置底部填充。
我没有使用脚手架内容中的填充物。
我使用@SuppressLint("UnusedMaterialScaffoldPaddingParameter")删除了不要在脚手架中使用填充的警告。
在所有显示底部栏的屏幕中，我使用了56 dp的底部填充，这是Jetpack的高度组成了底部栏。
Stack Overflow用户
发布于 2021-09-17 09:54:52
所以我们做了个调整：
- 在顶层，
scaffold现在不再包含bottomBar。 - 每个需要它的屏幕现在都有自己的
bottomBar。
这很好，jus bottomBar的纹章点击并不像我们希望的那么流畅(我们在点击中间交换它，所以这是预料中的)
这也解决了一个问题，一个屏幕有一个可滚动的内容，它的滚动距离有点混乱，因为它在隐藏底部栏时发生了变化。
https://stackoverflow.com/questions/68895484
复制相似问题
腾讯云开发者
