0Pricing
Jetpack Compose Academy · Урок

clickable для любого Composable

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

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

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

Anything Can Be Tappable

Sometimes you want a whole card or row to respond to taps, not a button. The clickable modifier makes any composable react. 👆

The clickable Modifier

Add Modifier.clickable to any element and pass an onClick lambda. The element now handles taps just like a button.

Text(
    "Open profile",
    modifier = Modifier.clickable { open() }
)

Clicks Get a Ripple

By default clickable adds a Material ripple, giving instant visual feedback so the user sees their tap registered.

Box(Modifier.clickable { toggle() }) {
    Text("Tap this box")
}

Make Whole Cards Tappable

The pattern shines on list items: put clickable on the row's container so a tap anywhere opens the detail screen.

Row(Modifier.clickable { openItem(id) }) {
    Text(item.title)
}

Add a Content Description

For accessibility, pass an onClickLabel describing what the tap does, so screen readers announce the action clearly.

Modifier.clickable(
    onClickLabel = "Open profile"
) { open() }

Order in the Chain Matters

Place clickable before padding to make the padded area tappable, or after it to limit taps to the inner content.

Modifier
    .clickable { go() }
    .padding(16.dp)

Toggle State on Tap

Pair clickable with state to build custom toggles, like an expandable card that grows when the header is tapped.

Modifier.clickable { expanded = !expanded }

Disable a clickable

The clickable modifier also takes an enabled flag. Set it false and the element stops responding, just like a disabled button.

Modifier.clickable(enabled = isReady) { next() }

combinedClickable for More

Need long press or double tap too? Reach for combinedClickable, which exposes onLongClick and onDoubleClick alongside onClick.

Modifier.combinedClickable(
    onClick = { open() },
    onLongClick = { showMenu() }
)

Buttons vs clickable

Use a real Button for clear primary actions; reach for clickable when an arbitrary surface, like a card, needs to be tappable.

Keep Targets Big Enough

Small text with clickable can be hard to hit. Give it padding so the touch target stays at least about 48dp tall.

Quick Check

You want a tap anywhere on a list row to open its detail screen.

Recap: Tap Anything

You learned the clickable modifier turns any composable tappable, with ripples, labels, and an enabled flag. Cards and rows can react too. 🎉

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

Урок «clickable для любого Composable» бесплатный?

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

Чему я научусь в уроке «clickable для любого Composable»?

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

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

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

Сколько времени занимает урок «clickable для любого Composable»?

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

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

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

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

  1. Button и onClick
  2. Текстовые, контурные кнопки и кнопки с иконками
  3. Состояния доступности, отключения и загрузки
  4. clickable для любого Composable
← Назад к Jetpack Compose Academy