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.

@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:

@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:

@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.

@Composable
override fun View(modifier: Modifier) {
    Child(
        navElement = element,
        transitionHandler = TODO()
    ) { child, _ ->
        // TODO wrap in your own composables
        child()
    }
}

Lazy lists / grids¶

@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)
        }
    }
}