Jetpack Compose -动画导航没有动画脚手架topBar和bottomBar

Question

在尝试使用伴奏者的导航动画工具时，我对动画效果非常满意，但我希望屏幕的顶部和底部栏不要随着中间的内容一起动画。下面是应用程序的运行情况。正如你从gif中看到的，顶部和底部的栏随着中间的内容一起动画，我希望这种情况不要发生，而是让内容动画，而顶部和底部的栏保持静态。

下面是三个导航屏幕之一的代码，因为这三个屏幕的布局大致相同。

@Composable
fun LogScreen(
OpenTeacherScreen: (String, String) -> Unit,
OpenSettingsScreen: (String, String) -> Unit,
modifier: Modifier = Modifier,
viewModel: LoginViewModel = hiltViewModel()
) {
val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))
Scaffold(
scaffoldState = scaffoldState,
topBar = { TopAppBar(
title = {
Text(text = "BrahmaPass",
fontSize = 30.sp,
fontFamily = poppinsFamily,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth())},
backgroundColor = MaterialTheme.colors.primary
)  },
content = { padding ->
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(15.dp)
.fillMaxSize()
){
Text("Exit Log",
fontSize = 30.sp,
fontFamily = com.example.brahmapassv3.screens.home.poppinsFamily,
fontWeight = FontWeight.Medium,
textAlign = TextAlign.Center,) }
},
bottomBar = { BottomBar(OpenTeacherScreen, OpenSettingsScreen) })
}
@Composable
fun BottomBar(
OpenTeacherScreen: (String, String) -> Unit,
OpenSettingsScreen: (String, String) -> Unit,
) {
val selectedIndex = remember { mutableStateOf(2) }
BottomNavigation(elevation = 10.dp) {
BottomNavigationItem(icon = {
Icon(imageVector = Icons.Default.Settings,"")
},
selected = (selectedIndex.value == 0),
onClick = {
selectedIndex.value = 0
OpenTeacherScreen(SETTINGS_SCREEN, LOG_SCREEN)
})
BottomNavigationItem(icon = {
Icon(imageVector = Icons.Default.Home,"")
},
selected = (selectedIndex.value == 1),
onClick = {
selectedIndex.value = 1
OpenSettingsScreen(TEACHER_SCREEN, LOG_SCREEN)
})
BottomNavigationItem(icon = {
Icon(imageVector = Icons.Default.DateRange,"")
},
selected = (selectedIndex.value == 2),
onClick = {
selectedIndex.value = 2
})
}
}

下面是可组合屏幕的NavGraph的代码

composable(
LOG_SCREEN,
enterTransition = {
slideInHorizontally(initialOffsetX = { 1000 })
})
{
LogScreen(
OpenTeacherScreen = { route, popUp -> appState.navigateAndPopUp(route, popUp) },
OpenSettingsScreen = { route, popUp -> appState.navigateAndPopUp(route, popUp) }
)
}

Answer 1

如果你的应用程序的三个屏幕都使用相同的TopAppBar，那么创建一个主屏幕与脚手架定义底部的应用程序栏，其中导航栏和顶部栏，并把导航组合在内容

现在你不需要为每个屏幕定义顶部栏和底部栏，当你导航时，只有屏幕会动画，而不是顶部栏和底部栏

@Composable
fun MainScreen() {
val navController = rememberNavController()
val context = LocalContext.current
val mainScreenViewModel = MainScreenViewModel(context)
Scaffold(
contentWindowInsets = ScaffoldDefaults
.contentWindowInsets.exclude(WindowInsets.statusBars),
bottomBar = { BottomNavBar(navController = navController) },
) {
MainNavigation(navController, modifier = 
Modifier.padding(it),mainScreenViewModel)
}
}

`enter code here`@OptIn(ExperimentalLayoutApi::class)
@Composable
fun BottomNavBar(navController: NavHostController) {
val screens =
listOf(MainScreens.HomeScreen, MainScreens.CameraScreen, MainScreens.ProfileScreen)
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val bottomBarDestination = screens.any { it.route == currentDestination?.route }
if (bottomBarDestination) {
NavigationBar(
) {
screens.forEach { screen ->
NavigationBarItem(
icon = { Icon(imageVector = screen.icon, contentDescription = screen.name) },
selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
onClick = {
navController.navigate(screen.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
},
label = { Text(text = screen.name) }
)

}
}

}
}