Jetpack Compose Academy · บทเรียน

คีย์สำหรับรายการที่เสถียรและรวดเร็ว

ช่วยให้ Compose ติดตามรายการระหว่างการเปลี่ยนแปลง

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

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

Compose ติดตามแถวอย่างไร

โดยค่าเริ่มต้น Compose จะระบุแถวแต่ละแถวจาก ตำแหน่ง ในรายการ รายการศูนย์คือรายการศูนย์ รายการหนึ่งคือรายการหนึ่ง และต่อไปเรื่อย ๆ

ตำแหน่งเปลี่ยนเมื่อข้อมูลเปลี่ยน

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

ต้นทุนของความสับสน

แถวที่สร้างใหม่จะสูญเสียสถานะและภาพเคลื่อนไหว รายการที่ถูกลบอาจทำให้ทั้งรายการกะพริบ ขณะที่ Compose จัดเรียงทุกอย่างด้านล่างใหม่

กำหนดคีย์ให้แต่ละรายการ

คีย์ คือค่าที่คงที่และไม่ซ้ำกัน ใช้ระบุแต่ละรายการตามตัวตน ไม่ใช่ตามตำแหน่ง จากนั้น Compose จะติดตามรายการได้แม้รายการจะย้ายที่

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

ใช้ ID ที่ไม่ซ้ำกันจริง

คีย์ที่ดีที่สุดคือ ID ที่ไม่ซ้ำกันจริงจากข้อมูลของคุณ เช่น ID จากฐานข้อมูล ค่านี้จะคงเดิมไม่ว่ารายการจะอยู่ที่ใด

คีย์ต้องไม่ซ้ำกัน

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

อย่าใช้ดัชนีเป็นคีย์

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

สถานะติดตามรายการไปด้วย

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

คีย์ช่วยให้เกิดภาพเคลื่อนไหว

คีย์ที่คงที่ช่วยให้ Compose สร้างภาพเคลื่อนไหวเมื่อรายการเคลื่อนที่ ปรากฏขึ้น หรือหายไป หากไม่มีคีย์ Compose จะไม่ทราบว่าเป็นการย้ายหรือการสร้างใหม่

items(items, key = { it.id }) { item ->
    Text(item.label, Modifier.animateItem())
}

itemsIndexed ก็รับคีย์ได้

ตัวสร้าง itemsIndexed ก็รับแลมบ์ดาคีย์ได้เช่นกัน คุณยังคงได้รับดัชนี พร้อมตัวตนที่คงที่สำหรับทุกแถว

itemsIndexed(data, key = { _, item -> item.id }) { i, item ->
    Text("$i: ${item.name}")
}

คีย์คุ้มค่าที่จะเพิ่มเกือบทุกครั้ง

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

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

คีย์รายการที่ดีควรมีคุณสมบัติอย่างไร

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

สรุป: คีย์คงที่ รายการคงที่

คีย์ทำให้รายการมีตัวตนนอกเหนือจากตำแหน่ง ใช้ ID ที่ไม่ซ้ำกันจริง รักษาความไม่ซ้ำกันของคีย์ แล้วสถานะและภาพเคลื่อนไหวจะทำงานได้อย่างถูกต้อง ✨

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

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

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

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

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

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

บทเรียน “คีย์สำหรับรายการที่เสถียรและรวดเร็ว” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คีย์สำหรับรายการที่เสถียรและรวดเร็ว”

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

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

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

บทเรียน “คีย์สำหรับรายการที่เสถียรและรวดเร็ว” ใช้เวลานานแค่ไหน

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

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

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

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

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