coco
103 lines
2.8 KiB
Markdown
103 lines
2.8 KiB
Markdown
# Navigation
|
|
|
|
!!! success
|
|
To use the `Navigator` you should first import `cafe.adriel.voyager:voyager-navigator` (see [Setup](../setup.md)).
|
|
|
|
### Screen
|
|
|
|
On Voyager, screens are just classes with a composable function as the entrypoint. To create one, you should implement the `Screen` interface and override the `Content()` composable function.
|
|
|
|
You can use `data class` (if you need to send params), `class` (if no param is required).
|
|
|
|
```kotlin
|
|
class PostListScreen : Screen {
|
|
|
|
@Composable
|
|
override fun Content() {
|
|
// ...
|
|
}
|
|
}
|
|
|
|
data class PostDetailsScreen(val postId: Long) : Screen {
|
|
|
|
@Composable
|
|
override fun Content() {
|
|
// ...
|
|
}
|
|
}
|
|
```
|
|
|
|
### Navigator
|
|
|
|
`Navigator` is a composable function deeply integrated with Compose internals. It'll manage the [lifecyle](../lifecycle.md), [back press](../back-press.md), [state restoration](../state-restoration.md) and even [nested navigation](nested-navigation.md) for you.
|
|
|
|
To start using it, just set the initial `Screen`.
|
|
|
|
```kotlin
|
|
class SingleActivity : ComponentActivity() {
|
|
|
|
override fun onCreate(savedInstanceState: Bundle?) {
|
|
super.onCreate(savedInstanceState)
|
|
|
|
setContent {
|
|
Navigator(HomeScreen)
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Use the `LocalNavigator` to navigate to other screens. Take a look at the [Stack API](../stack-api.md) for the available operations.
|
|
|
|
```kotlin
|
|
class PostListScreen : Screen {
|
|
|
|
@Composable
|
|
override fun Content() {
|
|
// ...
|
|
}
|
|
|
|
@Composable
|
|
private fun PostCard(post: Post) {
|
|
val navigator = LocalNavigator.currentOrThrow
|
|
|
|
Card(
|
|
modifier = Modifier.clickable {
|
|
navigator.push(PostDetailsScreen(post.id))
|
|
// Also works:
|
|
// navigator push PostDetailsScreen(post.id)
|
|
// navigator += PostDetailsScreen(post.id)
|
|
}
|
|
) {
|
|
// ...
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
If part of your UI is shared between screens, like the `TopAppBar` or `BottomNavigation`, you can easily reuse them with Voyager.
|
|
|
|
```kotlin
|
|
@Composable
|
|
override fun Content() {
|
|
Navigator(HomeScreen) { navigator ->
|
|
Scaffold(
|
|
topBar = { /* ... */ },
|
|
content = { CurrentScreen() },
|
|
bottomBar = { /* ... */ }
|
|
)
|
|
}
|
|
}
|
|
```
|
|
|
|
{% hint style="warning" %}
|
|
You should use `CurrentScreen()` instead of `navigator.lastItem.Content()`, because it will save the Screen's subtree for you (see [SaveableStateHolder](https://developer.android.com/reference/kotlin/androidx/compose/runtime/saveable/SaveableStateHolder)).
|
|
{% endhint %}
|
|
|
|
### Sample
|
|
|
|
|
|
|
|
!!! info
|
|
Source code [here](https://github.com/adrielcafe/voyager/tree/main/samples/android/src/main/java/cafe/adriel/voyager/sample/basicNavigation).
|
|
|