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

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

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