Slot APIs

Slot APIs

Slot APIs and Composable Parameters

A parameter of type @Composable () -> Unit is a slot, a hole the caller fills with UI: Scaffold has topBar and content, TopAppBar has title and actions. It is React 7,897 's children or a render prop as a typed, named parameter, and a component can offer several. Shelf has an action and its content:

ui/Shelf.kt: a titled shelf with two slots (imports omitted)Kotlin

@Composable
fun Shelf(
  title: String,
  modifier: Modifier = Modifier,
  action: @Composable () -> Unit = {},
  content: @Composable ColumnScope.() -> Unit,
) {
  Column(modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Row(verticalAlignment = Alignment.CenterVertically) {
      Text(title, Modifier.weight(1f), style = MaterialTheme.typography.titleLarge)
      action()
    }
    content()
  }
}

Put the main slot last as content, so callers write Shelf("Sold out") { BookCard(book) }. Give optional slots an empty default, or make them nullable to leave no gap. Add a receiver scope when children need one: ColumnScope.() -> Unit lets them call Modifier.weight(). Compiled, a slot is a Function2<Composer, Integer, Unit>, a function the runtime can skip or restart on its own.

MENU