Manuel Lorenzo
11/04/2020, 11:07 PMLazyColumnFor
, and I’m also using the navigation for compose. My question is that when I click on an item from the composable that has the LazyColumnFor
I’m navigating to the detail composable of that item (let’s call it ItemDetail
) and here, I see that the content is between the top bar and the bottom nav bar of the scaffold of the parent component. Is it possible to have a reference to the top bar and the bottom nav bar? For example I want to add the back arrow to the top bar for the up navigation. Thanks in advance!Zach Klippenstein (he/him) [MOD]
11/04/2020, 11:28 PMManuel Lorenzo
11/04/2020, 11:29 PMval navController = rememberNavController()
Scaffold(
bottomBar = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
items.forEach { screen ->
BottomNavigationItem(
icon = { Icon(Icons.Filled.Favorite) },
label = { Text(stringResource(screen.resourceId)) },
selected = currentRoute == screen.route,
onClick = {
// This is the equivalent to popUpTo the start destination
navController.popBackStack(navController.graph.startDestination, false)
// This if check gives us a "singleTop" behavior where we do not create a
// second instance of the composable if we are already on that destination
if (currentRoute != screen.route) {
navController.navigate(screen.route)
}
}
)
}
}
}
) {
NavHost(navController, startDestination = Screen.Profile.route) {
composable(Screen.Profile.route) { Profile(navController) }
composable(Screen.FriendsList.route) { FriendsList(navController) }
}
}
Zach Klippenstein (he/him) [MOD]
11/04/2020, 11:44 PMIan Lake
11/04/2020, 11:55 PMrememberNavController()
outside of the NavHost itself is to hook up other things to changes in the NavControllernavigate()
, so can your top bar show/hide an arrow if you are on the start destination of your graph and hook that up to navController.navigateUp()
Archie
11/05/2020, 4:10 AMval navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
Scaffold(
bottomBar = {
//----------- This right here -------//
val isBottomBarVisible = navBackStackEntry?.arguments?.getString(MY_KEY)
//----------- This right here -------//
if (isBottomBarVisible) {
MyBottomBar()
}
}
) {
NavHost(navController, startDestination = Screen.Profile.route) {
composable(Screen.Profile.route) {
Profile(navController)
}
composable(
Screen.MyScreen.route + "?${MY_KEY}=MY_KEY",
....
) {
MyScreen(navController)
}
}
}
I figured I could also do something like this and achieve the same...
val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val isBottomBarVisible by rememeber { mutableStateOf(false) }
Scaffold(
bottomBar = {
if (isBottomBarVisible) {
MyBottomBar()
}
}
) {
NavHost(navController, startDestination = Screen.Profile.route) {
composable(Screen.Profile.route) {
Profile(navController)
}
composable(
Screen.MyScreen.route
) {
//----------- This right here -------//
onCommit(navBackStackEntry) {
isBottomBarVisible = true
}
//----------- This right here -------//
MyScreen(navController)
}
}
}
Was wondering if both approaches are valid?Ian Lake
11/05/2020, 4:32 AMArchie
11/05/2020, 4:34 AMManuel Lorenzo
11/05/2020, 9:29 AMnavController.navigateUp()
from this detail view returns false and doesn’t navigate backArchie
11/05/2020, 10:33 AMval navController = rememberNavController()
var onCloseClick: (() -> Unit)? = null
Scaffold(
topBar = {
TopAppBar(
...,
actions = {
IconButton(onClick = {
onCloseClick?.invoke()
}) {
Icon(asset = Icons.Default.Close)
}
}
)
},
) {
NavHost(
navController = navController,
startDestination = ScreenA.route,
) {
composable(startingRoute) {
// ------- This here ------- //
onCommit(currentBackStackEntry) {
onCloseClick = {
// Do something
}
}
onDispose {
onCloseClick = null
}
}
composable(otherRouter) {
// ------- This here ------- //
onCommit(currentBackStackEntry) {
onCloseClick = {
// Do something else
}
}
onDispose {
onCloseClick = null
}
}
}
}
Manuel Lorenzo
11/05/2020, 11:45 AMIan Lake
11/05/2020, 5:28 PMManuel Lorenzo
11/12/2020, 7:47 AM