Layout

A container component that owns the children it is given.

A Row or a Column hands its children to flexbox. A Layout positions them itself: layout measures the children, gives the container a size and places each child. Use it for layouts flexbox cannot express, such as a pager whose pages sit at a computed stride, a split pane sized by a dragged divider, or a header that collapses as another child scrolls.

It is an ordinary component, returned from render:

class MyRow(private val header: Component, private val body: Component) : KComponent() {
  override fun ComponentScope.render(): Component =
      Layout(header, body) { header, body, c -> … }
}

Use components for children that come from data. The one-, two- and three-child constructors build the same container and let a fixed set of children be named at the call site:

Layout(items.map { Page(it).key(it.id) }) { measurables, c -> … }   // N children
Layout(avatar, name, timestamp) { avatar, name, timestamp, c -> … } // three, named

A container is unchanged only when its layout function is the same one. It is compared with equals, never by class. An object, or a lambda that captures nothing, is the same instance on every render and lets an unchanged container skip its layout. A lambda that captures values is a new instance each render, so the container lays out again every time, which is always correct and costs only the layout.

A null child, or one that renders nothing, keeps its slot as an empty child that measures 0x0, so every child has the index it was declared at and a function naming its children always gets them all.

Give children a stable key when they come from data. Without one, a child's state is keyed by its position among its same-type siblings, so inserting at the front hands the second child the first child's state. That shows up as a video resuming at the wrong timestamp rather than as something that looks like a bug.

Children resolve into the parent's Litho tree rather than a nested one, so hook identity, prop reconciliation, incremental mount and visibility keep working across them without forwarding anything by hand.

A Layout mounts no content, so it gets a host of its own only when a style needs one. onClick, viewTag, focusable, a shadow and a transition name each create a host, as on any other component. Intercepting touch, cooperating with a nested scroll, or transforming children per frame still needs whatever mechanism you use today.

Parameters