Rows, Columns & Boxes

Three containers, all of layout

One Text on the screen won't get you far. Compose's layout system is built on three container composables, each arranging whatever children you give it:

  • Column β€” stacks children vertically, top to bottom.
  • Row β€” lines children up horizontally, left to right.
  • Box β€” layers children on top of each other; later children draw over earlier ones.

You nest them to build real screens: a screen is often a Column of rows, each row a Row of an icon and some text. Sound familiar? Column is Compose's VStack, Row is its HStack, Box is its ZStack β€” same three shapes, different names.

Both Row and Column take horizontalArrangement/verticalArrangement (spacing and grouping along the main axis) and horizontalAlignment/verticalAlignment (how children line up on the cross axis).