Как работает применение нескольких модификаторов size в Compose

Что проверяют

Понимаете ли вы, как модификаторы работают с ограничениями (constraints) при измерении, а не просто помните, что «порядок важен». Следом обычно показывают цепочку size(100.dp).width(50.dp) и спрашивают итоговый размер.

Как отвечать

Цепочка читается слева направо, от внешнего модификатора к внутреннему. Каждый модификатор размера получает ограничения сверху, сужает их и передаёт дальше:

• size, width, height: задают точный размер, но только в пределах входящих ограничений. Если родитель разрешает максимум 80 dp, size(100.dp) даст 80;
• несколько размеров подряд: побеждает первый. Modifier.size(100.dp).width(50.dp) делает ограничения точными 100 на 100, и width(50.dp) выйти за них не может: элемент будет 100 на 100. Так же fillMaxSize().size(50.dp) займёт всё доступное место;
• requiredSize: игнорирует входящие ограничения. Modifier.size(100.dp).requiredSize(50.dp) отдаст родителю 100 на 100, а содержимое будет 50 на 50 по центру этой области. Если requiredSize больше родителя, содержимое вылезет за границы;
• wrapContentSize(): снимает минимальные ограничения, после него внутренний size снова работает, а содержимое выравнивается внутри;
• widthIn, sizeIn, defaultMinSize: задают диапазон, а не точное значение, и тоже ужимаются в рамки внешних ограничений.

Отдельно скажите про padding: Modifier.size(100.dp).padding(10.dp) оставит содержимому 80 dp, а Modifier.padding(10.dp).size(100.dp) займёт 120 dp. По той же логике порядок background, clickable и padding решает, где окажутся фон и зона нажатия.

Где спотыкаются

Говорят, что последний модификатор переопределяет предыдущий, как в CSS. В Compose внутренний модификатор не может расширить ограничения внешнего, поэтому выигрывает внешний.

Пытаются уменьшить элемент, дописав size в конец цепочки после fillMaxWidth(), и не понимают, почему ничего не меняется. Нужен wrapContentWidth() между ними или requiredWidth.

Не учитывают ограничения родителя: size(200.dp) в контейнере шириной 150 dp даст 150. Layout Inspector показывает фактические размеры, и сверяться лучше с ним, а не с кодом.