Stack Navigation
Stack navigation is for managing a stack of screens, where only screen at the top of the stack is shown to the user.
Define your navigation model, (as already covered in model-driven navigation section)
@Serializable
sealed class StackScreens {
@Serializable
data object List : StackScreens()
@Serializable
data class Details(val number: Int) : StackScreens()
}
Creating a router with stack navigation model
@Composable
fun StackScreen() {
val router: Router<StackScreens> = rememberRouter {
listOf(StackScreens.List) // Root screen to be set here
}
}
Consuming the state from the router
Use RoutedContent to consume the state from the router.
@Composable
fun StackScreen() {
val router: Router<StackScreens> = rememberRouter { listOf(StackScreens.List) }
RoutedContent(router = router) { screen: StackScreens ->
when (screen) {
StackScreens.List -> ListScreen()
is StackScreens.Details -> DetailScreen(screen.number)
}
}
}
Navigating with stack navigation router
Decompose-router exposes the same Decompose stack navigator extension functions
val router: Router<StackScreens> = rememberRouter { listOf(StackScreens.List) }
// To go to details screen
Button(onClick = { number -> router.push(StackScreens.Details(number)) })
// To go back to list screen
Button(onClick = { router.pop() })
Animating screen transitions
Decompose-router simply exposes Decompose API
RoutedContent(
router = router,
animation = predictiveBackAnimation(
animation = stackAnimation(slide()),
),
)
For predictive back animations
Decompose-router simply exposes Decompose API
RoutedContent(
router = router,
animation = predictiveBackAnimation(
animation = stackAnimation(slide()),
onBack = { router.pop() },
backHandler = LocalRouterContext.current.backHandler
)
)
Last modified: 04 December 2024