Какие знаешь виды modifier?

Модификаторы в Jetpack Compose

В Jetpack Compose модификаторы (modifiers) — это ключевой инструмент для настройки внешнего вида, поведения, размера, положения и интерактивности UI-компонентов. Они реализуют паттерн декоратор, позволяя цепочечно применять различные изменения к элементу. Все модификаторы являются иммутабельными, и их композиция происходит последовательно.

Основные категории модификаторов

1. Модификаторы размера и расположения

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

• size(), width(), height() — задают точные или минимальные/максимальные размеры.
• fillMaxSize(), fillMaxWidth(), fillMaxHeight() — растягивают на доступное пространство.
• padding() — добавляет внутренние отступы.
• offset() — смещает элемент относительно исходной позиции.
• weight() — распределяет пространство в Row/Column (аналог layout_weight в XML).

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .padding(16.dp)
        .offset(x = 10.dp, y = 20.dp)
)

2. Модификаторы оформления и фона

Отвечают за визуальное оформление: фон, границы, тени, формы.

• background() — задаёт сплошной цвет, градиент или кисть.
• border() — добавляет рамку.
• shadow() — создаёт тень.
• clip() — обрезает контент по форме (прямоугольник, круг, скруглённые углы).

Surface(
    modifier = Modifier
        .size(100.dp)
        .clip(CircleShape)
        .background(Color.Blue)
        .border(2.dp, Color.Red, CircleShape)
)

3. Модификаторы обработки событий и интерактивности

Добавляют реакцию на пользовательский ввод.

• clickable() / combinedClickable() — обрабатывают клики и длинные нажатия.
• hoverable() — отслеживают наведение курсора.
• focusable(), onFocusEvent() — управляют фокусом.
• draggable(), swipeable() — для drag-and-drop и жестов.
• scrollable() — добавляют прокрутку.

Box(
    modifier = Modifier
        .size(100.dp)
        .clickable { println("Clicked!") }
        .hoverable(state = rememberHoverState())
)

4. Модификаторы компоновки и выравнивания

Контролируют расположение внутри родительских контейнеров.

• align() — выравнивает внутри Box.
• wrapContentSize() — обёртывает контент с выравниванием.
• fillMaxSize() с выравниванием — растягивает и позиционирует.

5. Специализированные и кастомные модификаторы

• graphicsLayer() — предоставляет низкоуровневый доступ к свойствам слоя (прозрачность, поворот, масштаб).
• drawBehind(), drawWithContent() — для кастомной отрисовки.
• pointerInput() — позволяет обрабатывать сложные жесты и тач-события.
• semantics() — улучшает доступность и тестирование.
• onGloballyPositioned() — даёт информацию о позиции и размере после компоновки.

Box(
    modifier = Modifier
        .size(100.dp)
        .graphicsLayer {
            rotationZ = 45f
            alpha = 0.7f
        }
        .pointerInput(Unit) {
            detectTapGestures(onTap = { offset -> /* обработка */ })
        }
)

Особенности работы с модификаторами

• Порядок важен: Модификаторы применяются последовательно. Например, padding().background() создаст отступы, а затем фон вокруг содержимого с отступами, а background().padding() — фон только под содержимым, затем отступы.
• Создание кастомных модификаторов: Вы можете создавать свои модификаторы, комбинируя существующие или реализуя интерфейс Modifier.Element для сложных случаев.
• Производительность: Compose оптимизирует рекомпозиции, связанные с модификаторами, но стоит избегать их пересоздания в лямбдах композиции без remember.
• Модификаторы по умолчанию: Многие компоненты имеют встроенные модификаторы (например, Button уже включает clickable и minimumTouchTargetSize).

Пример комплексного использования

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
        .clickable { navigateToDetail() }
        .shadow(elevation = 4.dp, shape = RoundedCornerShape(8.dp))
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text("Заголовок", fontWeight = FontWeight.Bold)
        Text("Описание элемента")
    }
}

Модификаторы в Compose обеспечивают декларативный, гибкий и типобезопасный способ настройки UI, заменяя множество атрибутов XML и методов View в традиционном Android. Их цепочечная природа и композиционность идеально соответствуют философии Compose.