โมเดลการวัดและการวางตำแหน่ง

Column, Row, and Box cover most screens. But sometimes you need total control over where children go. That is when you build a custom layout. 🎨

Unlike the old View system, Compose measures and places everything in a single pass. There is no expensive measure-then-measure-again cycle.

Every layout does two things in order. First it measures each child to learn its size. Then it places each child at a chosen position.

A parent receives its children as measurables. A measurable is a child you have not measured yet, like a parcel before you weigh it. 📦

Call measure on a measurable and you get a placeable back. The placeable knows its final width and height and is ready to be positioned.

When you measure, you pass constraints: the min and max width and height the child is allowed. The child picks a size within those bounds.

The single-pass rule means you must measure each child only once. Measuring the same child twice throws an error at runtime.

After measuring children, the parent reports its own width and height. It usually sizes itself to wrap the children it just measured.

Inside the layout block you call placeRelative on each placeable, giving it an x and y. That is where the child lands on screen.

Prefer placeRelative over place. It automatically mirrors positions for right-to-left languages, so your layout works everywhere. 🌍

Column, Row, and your future custom layouts all follow this same measure-then-place rhythm. Learn it once and you understand all of Compose layout.

What do you get back after measuring a measurable?

Compose lays out in one pass: measure each child once within constraints to get placeables, then place them. This model drives every layout you will build. ✅