Работа с модификаторами

Объединение модификаторов в цепочку

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

@Composable
private fun Greeting(name: String) {
    Column(
        // Chained `Modifier` functions:
        modifier = Modifier
            // `Modifier.padding(24.dp)` adds padding around the column
            .padding(24.dp)
            // `Modifier.fillMaxWidth()` makes the column expand to fill the available width
            .fillMaxWidth()
    ) {
        Text(text = "Hello,")
        Text(text = name)
    }
}

Порядок функций-модификаторов в цепочке имеет значение. Каждая функция вносит изменения в Modifier, возвращённый предыдущей функцией, поэтому последовательность вызовов напрямую влияет на итоговое поведение и внешний вид компонуемого элемента.

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

Compose Multiplatform предоставляет встроенные модификаторы, такие как size, padding и offset, для решения распространённых задач компоновки и позиционирования.

@Composable
fun Card() {
    // Sets the row size to 400x100 dp
    Row(modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            // Sets the required size to 150x150 dp and overrides the parent`s 100 dp limit
            modifier = Modifier.requiredSize(150.dp)
        )
        Column {
            // The content takes the remaining space within the row
        }
    }
}

@Composable
fun Card() {
    Row {
        Column {
            // Applies padding to adjust the position relative to the baseline
            Text(
                text = "Title",
                modifier = Modifier.paddingFromBaseline(top = 50.dp)
            )
            // Follows the default arrangement as there is no padding specified
            Text(text = "Subtitle")
        }
    }
}

@Composable
fun Card() {
    Row {
        Column {
            // Positions the text normally with no offsets applied
            Text(text = "Title")
            
            // Moves the text slightly to the right with the 4.dp offset along the X-axis,
            // while keeping the original vertical position
            Text(
                text = "Subtitle",
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}

Модификаторы с ограниченной областью действия

Модификаторы с ограниченной областью действия, также называемые модификаторами данных родителя, сообщают родительской компоновке о конкретных требованиях к дочернему элементу. Например, чтобы элемент соответствовал размеру родительского Box, используйте модификатор matchParentSize:

@Composable
fun MatchParentSizeComposable() {
    Box {
        // Takes size of its parent Box
        Spacer(
            Modifier
                .matchParentSize() 
                .background(Color.LightGray)
        )
        // The largest child, determines the Box size
        Card()
    }
}

Другой пример модификатора с ограниченной областью действия — weight, доступный в RowScope или ColumnScope. Он определяет, какую часть пространства должен занимать компонуемый элемент относительно соседних элементов:

@Composable
fun Card() {
    Row(
        // Takes the full width of its parent
        modifier = Modifier.fillMaxWidth() 
    ) {
        Image(
            /* Placeholder for loading an image */,
            // Assigns a weight of 1f to occupy one fraction of the available space 
            modifier = Modifier.weight(1f) 
        )
        
        Column(
            // Assigns a weight of 2f, taking twice the width compared to the Image
            modifier = Modifier.weight(2f)
        ) {
            // Content inside the column
        }
    }
}

Вынесение и повторное использование модификаторов

Объединённые в цепочку модификаторы можно вынести в переменные или функции для повторного использования. Это повышает читаемость кода и может улучшить производительность за счёт повторного использования экземпляров модификаторов.

val commonModifier = Modifier
    .padding(16.dp)
    .background(Color.LightGray)

@Composable
fun Example() {
    // Applies the reusable modifier with padding and background color
    Text("Reusable modifier", modifier = commonModifier)

    // Reuses the same modifier for the Button
    Button(
        onClick = { /* Do something */ },
        modifier = commonModifier
    )
    {
        Text("Button with the same modifier")
    }
}

Пользовательские модификаторы

Compose Multiplatform предоставляет множество готовых встроенных модификаторов для распространённых случаев использования, но вы также можете создавать собственные модификаторы.

Создать пользовательские модификаторы можно несколькими способами:

• Объединение существующих модификаторов в цепочку

• Использование фабрики компонуемых модификаторов

• Использование API более низкого уровня Modifier.Node

Дальнейшие действия

Подробнее о модификаторах см. в документации Jetpack Compose.