Jetpack Compose Academy · บทเรียน

เรียกใช้ Composable จาก Composable

ประกอบชิ้นส่วนเล็ก ๆ เป็นหน้าจอที่ใหญ่ขึ้น

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

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

สร้างสิ่งใหญ่จากสิ่งเล็ก

หน้าจอจริงไม่ได้ประกอบด้วยฟังก์ชันขนาดยักษ์เพียงฟังก์ชันเดียว คุณ ประกอบ หน้าจอเหล่านั้นด้วยการเรียก Composable ขนาดเล็กจากภายใน Composable ที่ใหญ่กว่า คล้ายการซ้อนบล็อกก่อสร้าง 🧱

Composable หนึ่งเรียกใช้อีกอันหนึ่ง

ภายใน Composable หนึ่ง คุณเพียง เรียกใช้ อีกอันด้วยชื่อของมัน ในที่นี้ Screen เรียก Greeting และ Compose จะวาด Greeting ตรงตำแหน่งที่คุณวางไว้

@Composable
fun Screen() {
    Greeting("Compose")
}

เรียกใช้หลายรายการต่อกัน

เขียนการเรียกใช้หลายรายการต่อกัน แล้วรายการเหล่านั้นจะแสดงตาม ลำดับ จากบนลงล่าง เช่นเดียวกับการอ่านฟังก์ชันจากต้นจนจบ

@Composable
fun Screen() {
    Header()
    Body()
    Footer()
}

ต้นไม้การประกอบ

การเรียกใช้ที่ซ้อนกันเหล่านี้จะก่อเป็น ต้นไม้ โดย Screen เป็นโหนดแม่ และ Composable แต่ละรายการที่มันเรียกใช้จะกลายเป็นโหนดลูกในลำดับชั้นของส่วนติดต่อผู้ใช้

ส่งข้อมูลลงไปยังลูก

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

@Composable
fun Screen() {
    UserName(name = "Ada")
}

นำกลับมาใช้ได้ทุกที่

เนื่องจาก Composable เป็นเพียงฟังก์ชัน คุณจึงสามารถ นำกลับมาใช้ ได้กี่ครั้งก็ได้ในหน้าจอต่าง ๆ พร้อมข้อมูลที่แตกต่างกัน

@Composable
fun List() {
    Item("Apple")
    Item("Pear")
}

แยกออกเพื่อให้อ่านง่าย

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

Composable ประกอบกันเอง

ชื่อเรียกนี้อธิบายได้ตรงตัว: ชิ้นส่วนเล็ก ๆ รวมกัน เป็นชิ้นส่วนที่ใหญ่ขึ้น การเชี่ยวชาญการซ้อนลักษณะนี้คือหัวใจของการสร้างส่วนติดต่อผู้ใช้ด้วย Compose

ลูกจะแสดงตรงตำแหน่งที่เรียกใช้

ลูกจะปรากฏตรงตำแหน่งที่คุณ เรียกใช้ ภายในโหนดแม่พอดี ย้ายการเรียกใช้ขึ้นหรือลง แล้วส่วนติดต่อผู้ใช้ก็จะย้ายตาม

@Composable
fun Card() {
    Title()
    Divider()
    Title()
}

ผสมแบบสำเร็จรูปกับแบบกำหนดเอง

คุณสามารถ ผสม Composable ของเฟรมเวิร์ก เช่น Text เข้ากับ Composable ของคุณเองได้อย่างอิสระ Compose จะปฏิบัติต่อทั้งหมดเหมือนกันเมื่อสร้างต้นไม้

@Composable
fun Card() {
    Text("Hi")
    Greeting("there")
}

คิดเป็นส่วนประกอบ

การออกแบบด้วย Compose หมายถึงการคิดเป็น ส่วนประกอบ ขนาดเล็กที่นำกลับมาใช้ได้ แต่ละส่วนรับผิดชอบงานหนึ่งอย่าง และหน้าจอจะกลายเป็นการจัดเรียงส่วนเหล่านั้นอย่างเป็นระเบียบ

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

ตรวจสอบความเข้าใจอย่างรวดเร็วเกี่ยวกับการประกอบ Composable

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

สรุป

ตอนนี้คุณสามารถสร้างหน้าจอด้วยการ ซ้อน Composable ได้แล้ว: เรียกใช้รายการเล็ก ๆ ภายในรายการที่ใหญ่กว่า ส่งข้อมูลลงไป และนำส่วนประกอบกลับมาใช้เพื่อสร้างต้นไม้ของส่วนติดต่อผู้ใช้ 🎉

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

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

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

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

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

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

บทเรียน “เรียกใช้ Composable จาก Composable” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

เขียนฟังก์ชัน @Composable
พรีวิวแบบสดด้วย @Preview
เรียกใช้ Composable จาก Composable
setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้

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