Compose: Modifier (Модификатор)

10-й курс/Закрытая зона

Обновлено: 05.06.2023, 22.06.2023, 25.12.2024, 05.03.2025, 26 января 2026

Добавляем модификатор в свою функцию
Комбинирование модификаторов
animateContentSize
animateBounds
basicMarquee
blur
border
clip
graphicsLayer
keepScreenOn
magnifier
offset
onGloballyPositioned
padding
rotate
size/fillMaxSize
zIndex
Создание собственного модификатора

У многих компонентов есть параметры, которые помогают настроить собственный внешний вид и поведение. Например, у Text есть параметры для настройки размера шрифта. Но данный параметр бессмыслен для Column. Но есть и более общие свойства, которые можно применить к большинству компонентов, например, общий размер или цвет. Эти общие настройки доступны через специальный объект Modifier.

Таким образом, Modifier управляет общими настройками компонента - с его помощью можно определить отступы, размеры, цвет и прочие атрибуты.

Простейший пример для знакомства. Зададим ширину и фоновый цвет для текстовой метки через модификаторы. Они задаются цепочкой.


@Composable
fun Content() {
    Text(
        text = "Пример с модификатором",
        modifier = Modifier
            .width(300.dp)
            .background(Color.Cyan)
    )
}

Можно объявить переменную до composable-функции.


@Composable
fun Content() {
    val modifier = Modifier
        .width(300.dp)
        .background(Color.Cyan)

    Text(
        text = "Пример с модификатором",
        modifier = modifier
    )
}

Модификатор должен идти первым в списке необязательных параметров функции, в этом случае мы можем опустить именованный параметр.


// без объявления именованного параметра
Text(
    text = "Пример с модификатором",
    modifier
)

Порядок объявления модификаторов

Порядок объявления модификаторов имеет важное значение. В качестве примера приведём случай, когда порядок может повлиять на отображение на экране.

Выводим круг красного цвета в контейнере Box. Мы задаём размер, цвет для фона и вырезаем нужную фигуру. Казалось, что может тут пойти не так.


@Composable
fun Content(){
    Box(
        modifier = Modifier
            .size(40.dp)
            .background(Color.Red)
            .clip(CircleShape)
    )
}

Однако, мы увидим красный квадрат.

Modifier

Поменяем местами два последних вызова функций.


@Composable
fun Content(){
    Box(
        modifier = Modifier
            .size(40.dp)
            .clip(CircleShape)
            .background(Color.Red)
    )
}

Теперь видим ожидаемый результат.

Modifier

Чтобы было легче понять принцип работы, добавим ещё один вызов функции для первого примера.


@Composable
fun Content(){
    Box(
        modifier = Modifier
            .size(40.dp)
            .background(Color.Red)
            .clip(CircleShape)
            .background(Color.Green)
    )
}

Как это работает. Сначала мы задали размер контейнера, затем закрасили его красным цветом, а затем подготовили маску для следующей операции. Но сама по себе маска ничего не делает, только следующий вызов применяет маску к контейнеру - в нашем случае маска закрашивается другим цветом.

Modifier