Row: วางสิ่งต่าง ๆ เคียงข้างกัน

When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️

A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.

Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.

Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.

Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.

Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.

Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.

Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.

A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.

For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.

Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.

Let's confirm how a Row lays out its children.

You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.