Android Academy · บทเรียน

ลิสต์ด้วย LazyColumn

แสดงลิสต์ที่เลื่อนได้อย่างมีประสิทธิภาพ

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

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

ทำไมไม่ใช้ Column อย่างเดียว

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

พบกับ LazyColumn

LazyColumn คือรายการแนวตั้งที่เลื่อนได้ โดยจะประกอบเฉพาะรายการที่อยู่บนหน้าจอในขณะนั้น คล้ายกับ RecyclerView รุ่นเก่า แต่เรียบง่ายกว่ามาก

LazyColumn {
    items(messages) { msg ->
        Text(text = msg)
    }
}

ฟังก์ชัน items()

ภายใน lambda ของ LazyColumn ให้เรียก items(list) และกำหนด composable สำหรับแต่ละองค์ประกอบ Compose จะเรียกใช้แบบประหยัดเมื่อผู้ใช้เลื่อนรายการ

LazyColumn {
    items(users) { user ->
        Text(text = user.name)
    }
}

ไม่ใช่ลูปทั่วไป

อย่าใช้ลูป for ปกติภายใน LazyColumn เพราะจะทำให้สูญเสียคุณสมบัติการสร้างแบบประหยัด ให้ใช้ items() (หรือ itemsIndexed()) เสมอ เพื่อให้ Compose สร้างรายการเมื่อจำเป็น

องค์ประกอบส่วนหัวเพียงรายการเดียว

ใช้ item { } (เอกพจน์) เพื่อเพิ่มองค์ประกอบคงที่หนึ่งรายการ เช่น ส่วนหัว ก่อนรายการที่สร้างด้วยลูป

LazyColumn {
    item { Text("Header") }
    items(data) { Text(it) }
}

itemsIndexed

เมื่อจำเป็นต้องทราบตำแหน่ง ให้ใช้ itemsIndexed เพื่อรับทั้งดัชนีและองค์ประกอบ

LazyColumn {
    itemsIndexed(data) { index, value ->
        Text(text = "$index: $value")
    }
}

คีย์เพื่อความเสถียร

กำหนด key ที่คงที่ให้แต่ละรายการ เพื่อให้ Compose ติดตามรายการได้ถูกต้องเมื่อรายการมีการเปลี่ยนแปลง ซึ่งช่วยเพิ่มประสิทธิภาพและทำให้ภาพเคลื่อนไหวทำงานดีขึ้น

items(users, key = { it.id }) { user ->
    Text(user.name)
}

การเว้นระยะรายการ

LazyColumn รับ verticalArrangement และ contentPadding เพื่อเว้นระยะรายการและเพิ่มระยะขอบให้ขอบของรายการ

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(data) { Text(it) }
}

LazyRow

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

LazyRow {
    items(images) { img ->
        Image(painter = img, contentDescription = null)
    }
}

การเลื่อนในตัว

ไม่ต้องเพิ่ม modifier สำหรับการเลื่อนให้กับ LazyColumn เพราะมันเลื่อนได้โดยอัตโนมัติ การเพิ่ม verticalScroll จะทำให้เกิดข้อขัดแย้งและแอปขัดข้อง รายการแบบ Lazy จัดการการเลื่อนด้วยตัวเอง

นำทุกอย่างมารวมกัน

รายการที่มีส่วนหัว คีย์ และการเว้นระยะ

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item { Text("Inbox") }
        items(messages, key = { it.id }) { msg ->
            Text(text = msg.text)
        }
    }
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ข้อได้เปรียบหลักของ LazyColumn เหนือ Column ที่เลื่อนได้คืออะไร

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

สรุปทบทวน

LazyColumn:

สร้างเฉพาะรายการที่มองเห็นได้ จึงมีประสิทธิภาพสำหรับรายการยาว
ใช้ items() / itemsIndexed() แทนลูป for
เพิ่ม key เพื่อความเสถียร และใช้ item { } สำหรับส่วนหัว
เลื่อนได้โดยอัตโนมัติ ไม่ต้องใช้ modifier สำหรับการเลื่อน ส่วน LazyRow คือรูปแบบแนวนอน

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

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

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

คอร์ส: 36
บทเรียน: 152

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

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

บทเรียน “ลิสต์ด้วย LazyColumn” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ลิสต์ด้วย LazyColumn”

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

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

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

บทเรียน “ลิสต์ด้วย LazyColumn” ใช้เวลานานแค่ไหน

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

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

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

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

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