Modifier: оформление и поведение

Знакомимся с Modifier — универсальным способом задавать размер, отступы, фон и поведение элементов.

Modifier — цепочка инструкций, которая описывает размер, отступы, оформление и поведение composable-элемента.

Зачем нужен Modifier

В Compose почти каждый компонент принимает параметр modifier. Через него вы задаёте, как элемент выглядит и ведёт себя: какого он размера, какие у него отступы, есть ли фон, реагирует ли на нажатие. Модификаторы соединяются в цепочку точкой:

Text(
    text = "Привет",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .clickable { /* реакция на клик */ }
)

Здесь padding(16.dp) добавляет отступ, background задаёт фон, а clickable делает элемент кликабельным. Единица dp (density-independent pixels) — независимый от плотности экрана размер.

Почему вообще понадобился единый Modifier, а не отдельные параметры у каждого компонента? Если бы у Text были свойства padding, background, onClick, а у Image — свой набор, пришлось бы дублировать одни и те же возможности в сотнях компонентов. Modifier выносит «как элемент расположен и ведёт себя» в общий механизм: любой composable, принимающий modifier, сразу получает весь арсенал — отступы, размер, фон, клики, прокрутку, тени. Это делает API единообразным и расширяемым.

Порядок модификаторов важен

Модификаторы применяются слева направо, и порядок меняет результат. Сравните:

// Отступ снаружи фона: серый прямоугольник с пустым полем вокруг
Modifier.padding(16.dp).background(Color.Gray)

// Отступ внутри фона: серый прямоугольник, а текст внутри отодвинут
Modifier.background(Color.Gray).padding(16.dp)

ASCII-сравнение

padding -> background:        background -> padding:
  ........                      ##########
  .######.   (отступ            #        #   (отступ
  .######.    снаружи)          #  текст #    внутри)
  ........                      ##########

Как работает под капотом

Каждый .метод() возвращает новый Modifier, оборачивающий предыдущий. Получается упорядоченный список «элементов модификации». При раскладке и отрисовке Compose проходит этот список по очереди: первый модификатор оборачивает второй, и так далее. Поэтому padding до background и после него дают разный визуальный результат — речь о том, что чем обёрнуто.

Частые ошибки

• Путать порядок padding и background/clickable — область клика и фон сместятся не туда.
• Указывать размеры в обычных пикселях вместо dp — на разных экранах элемент будет выглядеть по-разному.
• Создавать огромную цепочку модификаторов, дублируя её в каждом компоненте, вместо выноса в переменную.

Итог

• Modifier задаёт размер, отступы, фон и поведение через цепочку методов.
• Порядок модификаторов влияет на результат: они применяются по очереди.
• Размеры указывайте в dp для независимости от плотности экрана.