Text, Button и обработка нажатий

Изучаем два самых частых компонента — Text для надписей и Button для действий пользователя.

Text выводит надпись, Button — кликабельную кнопку, которая выполняет переданную лямбду при нажатии.

Text: вывод и стилизация

Text показывает строку. У него много параметров: цвет, размер шрифта, жирность, выравнивание:

Text(
    text = "Заголовок",
    color = Color.Black,
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold
)

Размер шрифта указывают в sp (scale-independent pixels) — он учитывает настройки доступности и размер шрифта в системе, поэтому для текста используют именно sp, а не dp.

На практике конкретные числа для шрифта задают редко: чаще берут готовый стиль из темы — style = MaterialTheme.typography.bodyLarge или titleMedium. Так весь текст в приложении выглядит согласованно, а размеры и начертания собраны в одном месте. Прямое указание fontSize оставляют для исключений. Если текст длинный, пригодятся maxLines и overflow = TextOverflow.Ellipsis — они обрежут лишнее многоточием.

Button: реакция на клик

Button принимает обязательный параметр onClick — лямбду, которая выполнится при нажатии. Содержимое кнопки описывается в её теле (обычно это Text):

@Composable
fun ActionButton() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text(text = "Нажато $count раз")
    }
}

Тип onClick — это () -> Unit: функция без аргументов, ничего не возвращающая. Внутри лямбды вы меняете состояние, а Compose сам обновит надпись.

Виды кнопок

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

Тело Button { ... } — это последний параметр-лямбда, помеченный как @Composable (так называемый trailing lambda Kotlin). Поэтому внутри можно вызывать другие composable. Кнопка сама добавляет отступы, фон, эффект нажатия (ripple) и располагает содержимое по центру — вам остаётся описать только сам контент.

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

• Указывать размер шрифта в dp вместо sp — текст перестаёт масштабироваться под настройки пользователя.
• Делать в onClick тяжёлую работу (запрос в сеть прямо тут) вместо вызова метода ViewModel.
• Забыть, что содержимое кнопки — это composable-лямбда, и пытаться передать текст обычной строкой первым позиционным аргументом.

Итог

• Text выводит надпись; размер шрифта — в sp.
• Button принимает onClick типа () -> Unit и тело-composable с содержимым.
• Для разных по важности действий есть Button, OutlinedButton, TextButton.