Модификаторы и визуальный интерфейс

Что такое модификаторы

Для настройки внешнего вида и стилизации большинства встроенных компонентов в Jetpack Compose применяются так называемые модификаторы. Модификаторы представляют функции, которые задают какой-то отдельный аспект для компонентов (или иными словами "модифицируют" внешний вид компонента), например, установка размеров компонента или его фонового цвета и т.д.

Большинство встронных компонентов поддерживают применение модификаторов через параметр modifier. Например, возьмем ранее встречавшийся простой компонент Text, который выводит некоторый текст. Данный компонент, как и другие компоненты в Jetpack Compose, определен в виде функции с аннотацией @Compose, которая имеет ряд параметров:

@Composable
fun Text(
    value: String,
    modifier: Modifier = Modifier,
	
	//..... остальные параметры
	
): @Composable Unit

Из определения функции компонента мы видим, что она имеет параметр modifier, который представляет тип (а если точнее интерфейс) Modifier. Его цель хранить конфигурационные настройки, которые применябтся к компонентами Composable. И тип Modifier предоставляет огромное количество встроенных функций-модификаторов, которые изменяют (модифицируют) отдельные аспекты компонентов. Далее отдельно рассмотрим отдельные группы этих функций. Большинство из них более или менее универсальны, применяются ко многим компонентам. А пока посмотрим на примере компонента Text, как применять модификаторы.

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize = 28.sp,
                modifier = Modifier.background(Color.LightGray)
            )
        }
    }
}

Здесь для компонента Text задается три параметра. Первый параметр представляет отображаемый текст. Второй параметр - fontSize задает размер шрифта - 28 единиц. Третий параметр задает модификаторы, которые применяются к компоненту:

modifier = Modifier.background(Color.LightGray)

В данном случае применяется только один модификатор - функция background(), которая устанавливает фоновый цвет. В нее передается определение цвета - здесь желтый цвет, предоставленный встроенным значением Color.LightGray.

Стоит учитывать, что функции модификаторы, как и используемые ими значения, необходимо импортировать:

import androidx.compose.foundation.background
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

Применение нескольких модификаторов

К компоненту можно применять множество модификаторов по цепочке:

Modifier.модификатор1().модификатор2().модификатор3()...модификаторN()

Например, применим к компоненту Text несколько модификаторов:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize = 28.sp,
                modifier = Modifier
                    .background(Color.LightGray)
                    .padding(30.dp)
            )
        }
    }
}

Здесь к компоненту Text применяются три функции-модификатора. Первая задает фоновый цвет:

Modifier.background(Color.LightGray)

Второй модификатор устанавливает отступы (30 единиц) от границ контейнера:

padding(30.dp)

Стоит отметить, что порядок модификаторов может играть большую роль. Так, в примере выше сначала применяется фоновый цвет к элементу Text, затем его содержимое сдвигается на 30 единиц от границ контейнера. Но попробуем изменить порядок модификаторов:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(30.dp)
                    .background(Color.LightGray)
            )
        }
    }
}

Теперь сначала содержимое Text сдвигается на 30 единиц, а потом к нему применяется фоновый цвет. И в итоге мы получим несколько иной результат: