Android Academy · บทเรียน

Composable คืออะไร

ฟังก์ชันที่อธิบาย UI

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

Composable คืออะไร

ใน Jetpack Compose คุณสร้างหน้าจอด้วยการเขียนฟังก์ชัน แทนการโหลดโครงร่าง XML composable คือฟังก์ชัน Kotlin ที่อธิบายส่วนหนึ่งของส่วนติดต่อผู้ใช้ของคุณ

คุณทำเครื่องหมายฟังก์ชันดังกล่าวด้วยคำอธิบายประกอบ @Composable เพื่อบอกคอมไพเลอร์ของ Compose ว่าฟังก์ชันนี้สามารถสร้างส่วนติดต่อผู้ใช้และเรียกใช้ฟังก์ชัน composable อื่น ๆ ได้

คำอธิบายประกอบ @Composable

การเพิ่ม @Composable ไว้เหนือฟังก์ชันจะปลดล็อกความสามารถอันทรงพลังของ Compose ภายในฟังก์ชันนี้ คุณสามารถเรียกใช้ composable อื่น ๆ เช่น Text หรือ Column ได้

ตามธรรมเนียม ชื่อฟังก์ชัน composable จะขึ้นต้นด้วยตัวพิมพ์ใหญ่ เช่นเดียวกับคลาส ทำให้มองเห็นฟังก์ชันส่วนติดต่อผู้ใช้ในโค้ดได้ง่าย

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

อธิบายส่วนติดต่อผู้ใช้ด้วย Kotlin

composable ไม่ได้คืนออบเจ็กต์ View แต่จะ สร้าง ส่วนติดต่อผู้ใช้เป็นผลข้างเคียงเมื่อ Compose เรียกใช้ฟังก์ชัน คุณเพียงอธิบายสิ่งที่ควรปรากฏบนหน้าจอ

รูปแบบนี้เรียกว่า การประกาศ กล่าวคือ คุณระบุว่าส่วนติดต่อผู้ใช้ควรมีลักษณะอย่างไรสำหรับข้อมูลปัจจุบัน แล้ว Compose จะจัดการวิธีวาดให้เอง

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composable เรียกใช้ Composable

พลังที่แท้จริงมาจากการซ้อนกัน composable หนึ่งสามารถเรียกใช้ composable อื่น ทำให้คุณสร้างหน้าจอที่ซับซ้อนจากส่วนประกอบขนาดเล็กที่นำกลับมาใช้ใหม่ได้

ในที่นี้ composable แม่เรียกใช้ composable ลูก Compose จะทำงานจากบนลงล่างและจัดวางส่วนติดต่อผู้ใช้ที่สร้างขึ้น

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

ฟังก์ชันที่ไม่มีค่าที่คืนกลับมา

composable ส่วนใหญ่คืนค่า Unit ซึ่งหมายความว่าไม่ได้คืนสิ่งที่นำไปใช้ประโยชน์ได้ หน้าที่ของมันคือสร้างส่วนติดต่อผู้ใช้ ไม่ใช่ส่งค่ากลับ

ดังนั้นคุณเรียกใช้ composable เพื่อให้เกิดผลบนหน้าจอ ไม่ใช่เพื่อเก็บผลลัพธ์ ลักษณะนี้แตกต่างจากฟังก์ชันทั่วไป แต่ไม่นานก็จะคุ้นเคย

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

ส่งข้อมูลเป็นพารามิเตอร์

composable รับพารามิเตอร์ได้เช่นเดียวกับฟังก์ชัน Kotlin ทั่วไป ทำให้ composable เดียวกันแสดงข้อมูลที่แตกต่างกันได้

ในที่นี้ Greeting รับค่า name และแสดงค่านั้น การส่งข้อมูลเข้าไปทำให้ composable มีความยืดหยุ่นและนำกลับมาใช้ใหม่ทั่วทั้งแอปได้

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

นำ Composable กลับมาใช้ใหม่

เนื่องจาก composable เป็นฟังก์ชัน คุณจึงเรียกใช้ฟังก์ชันเดิมหลายครั้งด้วยอาร์กิวเมนต์ที่แตกต่างกันได้ แต่ละครั้งจะสร้างส่วนติดต่อผู้ใช้ของตัวเอง

นี่คือวิธีหลีกเลี่ยงการเขียนซ้ำ: เขียนส่วนติดต่อผู้ใช้ครั้งเดียว แล้วนำกลับมาใช้ทุกที่ที่ต้องการ

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Composable อยู่ที่ใด

คุณวาง composable ไว้ภายในกิจกรรม Android โดยใช้ setContent บล็อกนี้คือจุดเริ่มต้นที่ Compose เข้ามาควบคุมหน้าจอ

ภายใน setContent คุณเรียกใช้ composable ระดับบนสุด และทุกสิ่งที่ composable นี้สร้างขึ้นจะกลายเป็นส่วนติดต่อผู้ใช้ของแอป

setContent {
    Greeting("World")
}

พื้นฐานการจัดองค์ประกอบใหม่

เมื่อข้อมูลที่ composable อ่านมีการเปลี่ยนแปลง Compose จะเรียกใช้ฟังก์ชันนั้นอีกครั้งเพื่ออัปเดตหน้าจอ การเรียกใช้อีกครั้งนี้เรียกว่า การจัดองค์ประกอบใหม่

คุณไม่ต้องอัปเดตส่วนติดต่อผู้ใช้ด้วยตนเอง เพียงเปลี่ยนข้อมูล แล้ว Compose จะจัดองค์ประกอบ composable ที่ได้รับผลกระทบใหม่โดยอัตโนมัติ ทำให้หน้าจอสอดคล้องกับสถานะอยู่เสมอ

สร้าง Composable ให้มีขนาดเล็ก

แนวทางที่ดีคือให้ composable แต่ละตัวทำหน้าที่ชัดเจนเพียงหนึ่งอย่าง composable ขนาดเล็กที่มุ่งเน้นงานเดียวอ่าน ทำการทดสอบ และนำกลับมาใช้ใหม่ได้ง่ายกว่า

หากฟังก์ชันมีขนาดใหญ่เกินไป ให้แยกเป็น composable ขนาดเล็กหลายตัวแล้วเรียกใช้ร่วมกัน ตัวคุณในอนาคตจะขอบคุณตัวเอง

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

การนำเข้าที่คุณจะพบ

composable มาจากไลบรารี Compose โดยทั่วไปคุณจะนำเข้า androidx.compose.runtime.Composable สำหรับคำอธิบายประกอบ และ androidx.compose.material3.Text สำหรับข้อความ

โดยปกติ Android Studio จะเพิ่มการนำเข้าเหล่านี้ให้คุณ การรู้ว่าการนำเข้ามาจากที่ใดจะช่วยได้เมื่อมีการนำเข้าที่ขาดหายไป

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

ตรวจสอบความเข้าใจ

มาทบทวนกันว่าอะไรทำให้ฟังก์ชันเป็น composable

สรุปทบทวน

คุณได้เรียนรู้ว่า composable คือฟังก์ชัน Kotlin ที่ทำเครื่องหมายด้วย @Composable และอธิบายส่วนติดต่อผู้ใช้ในรูปแบบการประกาศ composable รับพารามิเตอร์ เรียกใช้ composable อื่น และตั้งชื่อขึ้นต้นด้วยตัวพิมพ์ใหญ่ได้

composable คืนค่า Unit และสร้างส่วนติดต่อผู้ใช้แทนการคืนค่า เมื่อข้อมูลเปลี่ยนแปลง Compose จะจัดองค์ประกอบ composable เหล่านี้ใหม่เพื่ออัปเดตหน้าจอ บทถัดไป คุณจะได้แสดงข้อความจริงและจัดเรียงมุมมองซ้อนกันด้วย Column

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

บทเรียน “Composable คืออะไร” ฟรีหรือไม่

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

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

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

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

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

บทเรียน “Composable คืออะไร” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Android Academy