Jetpack Compose Academy · บทเรียน

Button และ onClick

เรียกใช้โค้ดเมื่อผู้ใช้แตะ

Button และ onClick เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Button และ onClick”

เรียกใช้โค้ดเมื่อผู้ใช้แตะ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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