Row, Column and Box

Row, Column and Box

Column stacks children vertically, Row places them side by side, and Box layers them, the last child on top: display: flex and position: absolute, in effect. BookRow puts a cover, a text column and a price in a Row; the cover is a Box whose children position themselves with Modifier.align:

ui/LayoutDemos.kt: a cover built with Box, and a row built around it (excerpts)Kotlin

@Composable
fun Cover(book: Book, modifier: Modifier = Modifier) {
  Box(modifier.size(64.dp, 88.dp).clip(RoundedCornerShape(6.dp))
    .background(Color(coverColors[book.id % coverColors.size]))) {
    Text(book.title.take(1), Modifier.align(Alignment.Center),
      color = Color.White, style = MaterialTheme.typography.headlineMedium)
    if (!book.inStock) Text("SOLD OUT", Modifier.align(Alignment.BottomCenter)
      .fillMaxWidth().background(Color(0xCCB71C1C)).padding(2.dp),
      color = Color.White, style = MaterialTheme.typography.labelSmall)
  }
}
@Composable
fun BookRow(book: Book, modifier: Modifier = Modifier) {
  Row(modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
    Cover(book)                                          // a Box: cover color, letter, badge
    Column(Modifier.weight(1f).padding(horizontal = 12.dp)) {
      Text(book.title, style = MaterialTheme.typography.titleMedium)
      Text(book.author, style = MaterialTheme.typography.bodyMedium)
    }
    Text("$%.2f".format(book.price), style = MaterialTheme.typography.labelLarge)
  }
}

Give every composable that emits UI a modifier parameter applied to its root, so callers can place it. Two rows appear at the top of the figure in ConstraintLayout in Compose.

MENU