Jetpack Compose Academy · Урок

Button и onClick

Запускайте код при нажатии пользователя.

«Button и onClick» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Tap, Then React

A button is your app's simplest conversation: the user taps, your code runs. In Compose you express this with the Button composable. 👆

The Button Composable

A Button needs two things: an onClick action and some content to show, usually a Text label inside its trailing lambda.

Button(onClick = { /* do work */ }) {
    Text("Tap me")
}

onClick Runs on Tap

The onClick lambda runs once each time the button is pressed. Put any plain Kotlin code you want there, like updating a value.

Button(onClick = { count = count + 1 }) {
    Text("Add one")
}

Content Is a Lambda

Everything between the button's braces is its content. You are not limited to text; any composable can live inside that slot.

Button(onClick = { send() }) {
    Text("Send now")
}

Wire Up Real State

onClick really shines with state: change a value there and the UI redraws to match the new value automatically.

var liked by remember { mutableStateOf(false) }
Button(onClick = { liked = !liked }) {
    Text(if (liked) "Liked" else "Like")
}

Call a Function

For tidy code, point onClick at a named function instead of inlining logic. Your UI stays readable and the logic stays testable.

Button(onClick = ::saveProfile) {
    Text("Save")
}

Buttons Look Filled by Default

A plain Button renders as a filled, high-emphasis button: solid background, contrasting label. It signals the main action on a screen.

One Primary Action

Reserve the filled Button for the single most important action, like Submit or Continue. Too many filled buttons compete for attention.

Empty onClick Does Nothing

An empty onClick lambda compiles fine and the button still ripples, but nothing happens. Always wire it to real behavior. 🤔

Button(onClick = { }) {
    Text("Does nothing yet")
}

Pass a Modifier

Like most composables, Button accepts a modifier so you can size, pad, or space it within its parent layout.

Button(
    onClick = { go() },
    modifier = Modifier.fillMaxWidth()
) { Text("Continue") }

Tap to Confirm

Think of onClick as the moment of commitment: the user has decided. Use it to save, navigate, or trigger the work they asked for.

Quick Check

You wrote a Button but tapping it does nothing.

Recap: Tap Into Action

You met the Button composable: an onClick lambda for behavior plus a content lambda for its label. Tap, run code, update state. 🎉

Часто задаваемые вопросы

Урок «Button и onClick» бесплатный?

Да — полный текст урока «Button и onClick» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Button и onClick»?

Запускайте код при нажатии пользователя. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Button и onClick»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Jetpack Compose Academy