Is there a way where I can make AnimatedVisibility to be scrollable without being part of LazyColumn as an item, so it can be visible from all of nav destination, so when I navigate to second screen, the Dynamic part to shrink and also when I scroll on first screen, to shrink as it is item of LazyColumn
@Composable
fun ExampleBehaviour() {
val scaffoldState = rememberScaffoldState()
val lazyListState = rememberLazyListState()
val navController = rememberAnimatedNavController()
val customNav: () -> Unit = {
navController.navigate("2")
}
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
Scaffold(
scaffoldState = scaffoldState,
topBar = {
AnimatedVisibility(
visible = currentRoute == "1" || currentRoute == null,
enter = expandVertically(tween(300)),
exit = shrinkVertically(tween(300)),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(80.dp)
.background(color = Color.Cyan)
) {
Text("Dynamic part")
}
}
},
content = {
AnimatedNavHost(navController = navController, startDestination = "1") {
composable("1",
enterTransition = { slideInHorizontally { -1000 } },
exitTransition = { slideOutHorizontally { 1000 } }) {
LazyColumn(state = lazyListState) {
items(50) {
Column(
Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(start = 20.dp, top = 10.dp, bottom = 10.dp)
.clickable { customNav() }
) {
Text(text = "Row ${it + 1}")
Divider(
color = Color.Gray,
thickness = 1.dp
)
}
}
}
}
composable("2",
enterTransition = { slideInHorizontally { 1000 } },
exitTransition = { slideOutHorizontally { -1000 } }) {
Column(
Modifier
.fillMaxSize()
.background(color = Color.DarkGray),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Content text 2")
}
}
}
}
)
}