Система Modifier
Задавайте размер, отступы и стиль с помощью модификаторов
«Система Modifier» — бесплатный урок Android Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.
Что такое модификатор?
Модификатор оформляет или настраивает компонуемый элемент: задаёт его размер, отступы, фон, реакцию на нажатие и многое другое. Почти каждый компонуемый элемент принимает параметр modifier.
Цепочки модификаторов
Модификаторы можно объединять в цепочку: каждая функция возвращает новый модификатор, поэтому их вызывают один за другим.
Modifier
.padding(16.dp)
.size(100.dp)
.background(Color.LightGray)Передача Modifier
Передайте цепочку параметру modifier компонуемого элемента.
Text(
text = "Hello",
modifier = Modifier
.padding(8.dp)
.background(Color.Yellow)
)Порядок имеет значение!
Порядок модификаторов изменяет результат. Модификаторы применяются слева направо, оборачивая друг друга подобно слоям.
Сначала padding, затем background
Здесь сначала применяется отступ, поэтому фон заполняет только внутреннюю область, а пространство отступа остаётся прозрачным.
Modifier
.padding(16.dp)
.background(Color.Red)Сначала background, затем padding
Если поменять их местами, фон покроет всю область, а отступ сдвинет содержимое внутрь. Модификаторы те же, но результат выглядит иначе — потому что порядок имеет значение.
Modifier
.background(Color.Red)
.padding(16.dp)Распространённые модификаторы размера
Часто используемые модификаторы размера:
size(100.dp)— фиксированные ширина и высота.fillMaxWidth()— занять всё горизонтальное пространство.fillMaxSize()— занять всё доступное пространство.width()/height()— задать один размер.
Обработка нажатий
Modifier.clickable позволяет любому компонуемому элементу реагировать на нажатия — даже обычным Text или Box.
Text(
text = "Tap me",
modifier = Modifier.clickable { /* handle */ }
)Повторное использование параметра Modifier
По соглашению пользовательские компонуемые элементы принимают параметр modifier: Modifier = Modifier и передают его корневому элементу. Это позволяет вызывающему коду настраивать разметку извне.
@Composable
fun Card(modifier: Modifier = Modifier) {
Column(modifier = modifier) { /* ... */ }
}Modifier — первый параметр
По соглашению параметр modifier указывают первым среди необязательных параметров, а его значение по умолчанию — пустой Modifier. Это делает Ваш API согласованным со стандартной библиотекой.
Собираем всё вместе
Стилизованный контейнер с цепочкой модификаторов, порядок которых выбран намеренно.
Box(
modifier = Modifier
.size(120.dp)
.background(Color(0xFFE86F00))
.padding(12.dp)
) {
Text(text = "Compose", color = Color.White)
}Быстрая проверка
Почему Modifier.padding(16.dp).background(Color.Red) выглядит иначе, чем Modifier.background(Color.Red).padding(16.dp)?
Итоги
Модификаторы:
- Настраивают размер, отступы, фон, обработку нажатий и многое другое.
- Объединяются в цепочки и применяются по порядку — порядок имеет значение.
- Пользовательские компонуемые элементы должны предоставлять параметр
modifier: Modifier = Modifierпервым.
Часто задаваемые вопросы
Урок «Система Modifier» бесплатный?
Да — полный текст урока «Система Modifier» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.
Чему я научусь в уроке «Система Modifier»?
Задавайте размер, отступы и стиль с помощью модификаторов Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Android Academy?
Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Система Modifier»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Android Academy?
Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Column, Row и Box
- Система Modifier
- Выравнивание и расположение
- Списки с LazyColumn