coco
101 lines
2.6 KiB
Markdown
101 lines
2.6 KiB
Markdown
# Adding children to the view
|
|
|
|
Navigation models define only the abstract model, not how that model will look on the screen. This section describes different ways of adding children (navigation targets) to the composition.
|
|
|
|
All the below mentioned composables should be added to the `View` of the parent node.
|
|
|
|
|
|
## Children
|
|
|
|
Renders all visible children of a NavModel. This is the simplest and most common case.
|
|
|
|
```kotlin
|
|
@Composable
|
|
override fun View(modifier: Modifier) {
|
|
Children(
|
|
modifier = Modifier, // optional
|
|
navModel = TODO(),
|
|
transitionHandler = TODO() // optional
|
|
)
|
|
}
|
|
```
|
|
|
|
When rendering children you can have access to `TransitionDescriptor` which provides the following information:
|
|
|
|
```kotlin
|
|
@Immutable
|
|
data class TransitionDescriptor<NavTarget, out State>(
|
|
val params: TransitionParams,
|
|
val operation: Operation<NavTarget, out State>,
|
|
val element: NavTarget,
|
|
val fromState: State,
|
|
val toState: State
|
|
)
|
|
```
|
|
|
|
Additionally, you can supply custom modifier to a child `Node`. In this example, we're supplying different `Modifier`
|
|
to a child `Node` depending on the `NavTarget`:
|
|
|
|
```kotlin
|
|
@Composable
|
|
override fun View(modifier: Modifier) {
|
|
Children(
|
|
modifier = Modifier, // optional
|
|
navModel = TODO(),
|
|
transitionHandler = TODO() // optional
|
|
) {
|
|
children<NavTarget> { child, descriptor ->
|
|
child(
|
|
modifier = Modifier
|
|
.background(
|
|
color = getBackgroundColor(descriptor.element)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Child
|
|
|
|
Renders a single child associated to a `NavElement`. Useful if you want to define different child placements in the layout individually.
|
|
|
|
```kotlin
|
|
@Composable
|
|
override fun View(modifier: Modifier) {
|
|
Child(
|
|
navElement = element,
|
|
transitionHandler = TODO()
|
|
) { child, _ ->
|
|
// TODO wrap in your own composables
|
|
child()
|
|
}
|
|
}
|
|
```
|
|
|
|
## Lazy lists / grids
|
|
|
|
```kotlin
|
|
@Composable
|
|
override fun View(modifier: Modifier) {
|
|
// TODO grab all visible children from the navModel manually
|
|
val children by navModel.visibleChildrenAsState()
|
|
GridExample(children)
|
|
}
|
|
|
|
@Composable
|
|
private fun GridExample(elements: List<NavElement<NavTarget, out Any?>>) {
|
|
LazyVerticalGrid(
|
|
columns = Fixed(2),
|
|
modifier = Modifier.fillMaxSize(),
|
|
contentPadding = PaddingValues(horizontal = 16.dp),
|
|
) {
|
|
items(elements) { element ->
|
|
// TODO use Child composable to render them individually inside the list / grid
|
|
Child(navElement = element)
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|