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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy