Jetpack Compose Academy · บทเรียน

แยก Composable ที่นำกลับมาใช้ใหม่ได้

ปรับโครงสร้างหน้าจอเป็นองค์ประกอบที่เป็นระเบียบ

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

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

ได้เวลาปรับโครงสร้าง

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

สังเกตรูปแบบที่ซ้ำกัน

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

แยก StatBlock

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

@Composable
fun StatBlock(count: String, label: String) {
    Column { Text(count); Text(label) }
}

นำกลับมาใช้สามครั้ง

ตอนนี้แถวสถิติมีเพียงการเรียกใช้ที่สะอาดสามครั้ง StatBlockเดิมจะแสดงข้อมูลต่างกันในแต่ละครั้ง โดยไม่มีโค้ดซ้ำ

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

แยกส่วนหัว

รวมรูปประจำตัว ชื่อ และประวัติไว้ใน Composable ProfileHeader ฟังก์ชันของหน้าจอหลักจะสั้นลงและกวาดตามองได้ง่ายขึ้นมาก

@Composable
fun ProfileHeader(name: String, bio: String) {
    Column { /* avatar, name, bio */ }
}

ตั้งชื่อสิ่งต่าง ๆ ให้ชัดเจน

ชื่อ Composable ที่ดีควรบอกสิ่งที่เห็น เช่น ProfileHeader, StatBlock และ FollowButton ชื่อที่ชัดเจนทำให้การ์ดอ่านได้เหมือนประโยค

ส่งข้อมูลเข้าไป

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

ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")

ย้ายการจัดการการแตะออกไป

ให้ส่วนหลักเป็นผู้ตัดสินใจว่าการแตะจะทำอะไร เปิดเผยพารามิเตอร์แลมบ์ดา onFollowClick เพื่อให้ FollowButton ยังคงใช้งานได้ทั่วไป

@Composable
fun FollowButton(onClick: () -> Unit) {
    Button(onClick = onClick) { Text("Follow") }
}

ประกอบหน้าจอ

ตอนนี้ ProfileCard ระดับบนสุดเพียงประกอบส่วนต่าง ๆ ตามลำดับ Composable ย่อยแต่ละรายการรับผิดชอบงานหนึ่งอย่าง ซึ่งเป็น แนวทางของ Compose

Column {
    ProfileHeader(name, bio)
    StatsRow(stats)
    FollowButton(onFollow)
}

เพิ่มพารามิเตอร์ตัวปรับแต่ง

Composable ที่นำกลับมาใช้ใหม่ได้อย่างแท้จริงควรรับพารามิเตอร์ ตัวปรับแต่ง โดยมีค่าเริ่มต้นเป็น Modifier จากนั้นผู้เรียกใช้จึงกำหนดขนาดและพื้นที่รอบจากภายนอกได้

@Composable
fun StatBlock(
    count: String,
    label: String,
    modifier: Modifier = Modifier
) { /* ... */ }

สะอาดและนำกลับมาใช้ใหม่ได้

ฟังก์ชันขนาดใหญ่เพียงฟังก์ชันเดียวของคุณกลายเป็น Composables ขนาดเล็กหลายรายการที่มุ่งเน้นงานและนำกลับมาใช้ใหม่ได้ โครงสร้างนี้รองรับการขยายตัวเมื่อแอปมี ความซับซ้อนมากขึ้น 🎉

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

อะไรทำให้ Composable นำกลับมาใช้กับข้อมูลต่าง ๆ ได้

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

สรุปทบทวน: คุณสร้างการ์ดสำเร็จแล้ว

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

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

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

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

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

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

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

บทเรียน “แยก Composable ที่นำกลับมาใช้ใหม่ได้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แยก Composable ที่นำกลับมาใช้ใหม่ได้”

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

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

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

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

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

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

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

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

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