Jetpack Compose Academy · บทเรียน

clickable บน Composable ใด ๆ

ทำให้องค์ประกอบที่ไม่ใช่ปุ่มแตะได้

บทเรียน 4 จาก 413 ขั้นตอน

clickable บน Composable ใด ๆ เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทุกอย่างสามารถแตะได้

บางครั้งคุณต้องการให้การ์ดหรือแถวทั้งแถวตอบสนองต่อการแตะ ไม่ใช่แค่ปุ่ม ตัวปรับแต่ง clickable ทำให้คอมโพสิเบิลใด ๆ ตอบสนองได้ 👆

ตัวปรับแต่ง clickable

เพิ่ม Modifier.clickable ให้กับองค์ประกอบใด ๆ และส่งแลมบ์ดา onClick เข้าไป องค์ประกอบนั้นจะจัดการการแตะได้เหมือนปุ่ม

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

การแตะมีเอฟเฟกต์ระลอกคลื่น

โดยค่าเริ่มต้น clickable จะเพิ่มเอฟเฟกต์ระลอกคลื่นของ Material เพื่อให้มีการตอบสนองทางภาพทันที และผู้ใช้เห็นว่าระบบรับการแตะแล้ว

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

ทำให้การ์ดทั้งใบแตะได้

รูปแบบนี้เหมาะอย่างยิ่งกับรายการในรายการ: ใส่ clickable ให้คอนเทนเนอร์ของแถว เพื่อให้การแตะที่ใดก็ได้เปิดหน้ารายละเอียด

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

เพิ่มคำอธิบายเนื้อหา

เพื่อการช่วยเหลือพิเศษ ให้ส่ง onClickLabel ที่อธิบายว่าการแตะทำอะไร เพื่อให้โปรแกรมอ่านหน้าจอประกาศการกระทำได้อย่างชัดเจน

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

ลำดับในสายโซ่มีความสำคัญ

วาง clickable ไว้ก่อน padding เพื่อให้พื้นที่ที่มีระยะขอบด้านในแตะได้ หรือวางไว้หลัง padding เพื่อจำกัดการแตะไว้เฉพาะเนื้อหาด้านใน

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

สลับสถานะเมื่อแตะ

จับคู่ clickable กับสถานะเพื่อสร้างตัวสลับแบบกำหนดเอง เช่น การ์ดที่ขยายเมื่อแตะส่วนหัว

Modifier.clickable { expanded = !expanded }

ปิดใช้งาน clickable

ตัวปรับแต่ง clickable รับแฟล็ก enabled เช่นกัน หากกำหนดเป็น false องค์ประกอบจะหยุดตอบสนอง เหมือนปุ่มที่ปิดใช้งาน

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

combinedClickable เพื่อการทำงานเพิ่มเติม

ต้องการรองรับการกดค้างหรือแตะสองครั้งด้วยใช่ไหม ให้ใช้ combinedClickable ซึ่งเปิดให้ใช้ onLongClick และ onDoubleClick ควบคู่กับ onClick

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

ปุ่มกับ clickable

ใช้ปุ่มจริงสำหรับการกระทำหลักที่ชัดเจน และใช้ clickable เมื่อพื้นผิวทั่วไป เช่น การ์ด ต้องแตะได้

รักษาขนาดพื้นที่แตะให้ใหญ่พอ

ข้อความขนาดเล็กที่ใช้ clickable อาจแตะได้ยาก เพิ่มระยะขอบด้านในเพื่อให้พื้นที่แตะมีความสูงอย่างน้อยประมาณ 48dp

ตรวจสอบอย่างรวดเร็ว

คุณต้องการให้การแตะที่ใดก็ได้บนแถวรายการเปิดหน้ารายละเอียดของรายการนั้น

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: แตะอะไรก็ได้

คุณได้เรียนรู้ว่าตัวปรับแต่ง clickable ทำให้คอมโพสิเบิลใด ๆ แตะได้ พร้อมเอฟเฟกต์ระลอกคลื่น ป้ายกำกับ และแฟล็ก enabled การ์ดและแถวก็ตอบสนองได้เช่นกัน 🎉

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “clickable บน Composable ใด ๆ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “clickable บน Composable ใด ๆ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “clickable บน Composable ใด ๆ”

ทำให้องค์ประกอบที่ไม่ใช่ปุ่มแตะได้ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “clickable บน Composable ใด ๆ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy