Material 3 и компоновка интерфейса

Material 3 — актуальная дизайн-система Google для Compose: она даёт готовые компоненты, динамические цвета и структуру экрана через Scaffold, а внешний вид элементов настраивается цепочкой модификаторов.

Суть: Material 3 избавляет от ручной верстки типовых элементов и обеспечивает единый современный вид, а modifier — универсальный способ настраивать размер, отступы и поведение любого composable.

Material 3 (он же Material You) — третья версия дизайн-системы Google. В Compose она поставляется пакетом androidx.compose.material3 и даёт готовые компоненты: Button, Card, TextField, TopAppBar и десятки других. Они уже соответствуют гайдлайнам, поддерживают тёмную тему и на современных устройствах могут подстраивать палитру под обои пользователя (динамические цвета).

Каркас экрана задаёт Scaffold — он размещает верхнюю панель, нижнюю навигацию, плавающую кнопку и основное содержимое по слотам.

@Composable
fun MainScreen() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("Главная") }) }
    ) { padding ->
        Column(modifier = Modifier.padding(padding)) {
            Text("Содержимое экрана")
        }
    }
}

Модификаторы

Modifier — это способ настроить внешний вид и поведение composable: размер, отступы, фон, обработку кликов, выравнивание. Модификаторы выстраиваются в цепочку, и порядок имеет значение: каждый следующий применяется к результату предыдущего.

Text(
    text = "Привет",
    modifier = Modifier
        .padding(16.dp)        // внешний отступ
        .fillMaxWidth()        // на всю ширину
)

// порядок важен: сначала отступ, потом фон даст рамку из фона
Box(modifier = Modifier.padding(8.dp).background(Color.LightGray))

Тема

Цвета, типографику и формы задаёт тема через MaterialTheme. Composable берут цвета не напрямую, а из темы (MaterialTheme.colorScheme), поэтому переключение на тёмный режим происходит автоматически.

Text(
    text = "Заголовок",
    color = MaterialTheme.colorScheme.primary,
    style = MaterialTheme.typography.headlineMedium
)

Как работает под капотом

Тема — это набор значений, предоставляемых через механизм неявного контекста (CompositionLocal). Когда вы оборачиваете приложение в MaterialTheme, все вложенные composable получают доступ к его цветам и типографике без явной передачи. Модификаторы же реализованы как цепочка обёрток вокруг элемента измерения и размещения: каждый модификатор — это слой, влияющий на то, как composable измеряется и рисуется. Поэтому padding до background и после дают разный визуальный результат.

  Слоты Scaffold

  +-----------------------------+
  | topBar                      |
  +-----------------------------+
  |                             |
  |   content (с padding)       |
  |                             |
  +-----------------------------+
  | bottomBar / FAB             |
  +-----------------------------+

Частые ошибки

Игнорировать padding от Scaffold. Если не применить переданный padding к содержимому, контент уедет под верхнюю панель.

Хардкодить цвета. Прямые значения цвета ломают тёмную тему; берите цвета из MaterialTheme.colorScheme.

Путать порядок модификаторов. padding до и после background или clickable даёт разный результат — следите за порядком.

Best practices

• Используйте готовые компоненты Material 3 вместо ручной верстки.
• Берите цвета и типографику из MaterialTheme, а не хардкодьте.
• Стройте каркас экрана через Scaffold и применяйте переданный padding.
• Следите за порядком модификаторов в цепочке.

Чувствительность к порядку модификаторов удобно смоделировать на Python: разный порядок операций даёт разный результат. Запустите врезку.

# Аналог цепочки модификаторов: порядок важен
def apply_chain(base, steps):
    result = base
    for name in steps:
        result = name + '(' + result + ')'
    return result

print(apply_chain('Text', ['padding', 'background']))
print(apply_chain('Text', ['background', 'padding']))

Попробуй сам ▶ — поменяйте местами padding и background и сравните вложенность. В Compose так же: внешний модификатор оборачивает результат внутреннего, поэтому порядок меняет вид.

Итог: Material 3 даёт готовую дизайн-систему, Scaffold структурирует экран, а модификаторы настраивают каждый элемент. С таким набором можно собрать аккуратный современный интерфейс. Дальше — списки, которыми показывают много данных.