Jetpack Compose Academy · บทเรียน

ส่วนหัวติดด้านบนและรายการแบ่งส่วน

จัดกลุ่มรายการด้วยส่วนหัวที่ตรึงไว้

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

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

รายการมักมีส่วนต่าง ๆ

รายการจริงมักจัดกลุ่มข้อมูล เช่น รายชื่อติดต่อแยกตามตัวอักษร หรืออีเมลแยกตามวันที่ แต่ละกลุ่มควรมี ส่วนหัวที่ชัดเจนอยู่เหนือแถวของกลุ่ม

ส่วนหัวก็คือ item

ส่วนหัวที่ง่ายที่สุดคือบล็อก item เดี่ยวที่มี Text ซึ่งจัดรูปแบบไว้ วางไว้ก่อน items ของกลุ่ม แล้วส่วนหัวจะเลื่อนไปพร้อมกัน

item { Text("A", style = MaterialTheme.typography.titleMedium) }

สร้างส่วนต่าง ๆ ด้วยการวนซ้ำ

วนซ้ำผ่านข้อมูลที่จัดกลุ่มไว้ แล้วเพิ่ม item ส่วนหัวและ items ของแต่ละกลุ่ม วิธีนี้จะสร้างรายการที่แบ่งส่วนอย่างเป็นระเบียบ

groups.forEach { (letter, names) ->
    item { Text(letter) }
    items(names) { Text(it) }
}

ปัญหา: ส่วนหัวเลื่อนหายไป

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

พบกับส่วนหัวแบบติดค้าง

stickyHeader จะตรึงตัวเองไว้ด้านบนขณะที่ส่วนของมันเลื่อนอยู่ด้านล่าง ป้ายชื่อกลุ่มปัจจุบันจึงยังมองเห็นอยู่เสมอ 📌

stickyHeader { Text("A") }

ใช้เหมือน item

เรียกใช้ stickyHeader ตรงจุดเดียวกับที่คุณจะวาง item ส่วนหัว โดยวางไว้ก่อนบล็อก items ของส่วน Compose จะจัดการตรึงให้เอง

groups.forEach { (letter, names) ->
    stickyHeader { Text(letter) }
    items(names) { Text(it) }
}

แสดงส่วนหัวทีละส่วน

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

ส่วนหัวต้องมีพื้นหลัง

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

stickyHeader {
    Text(letter, Modifier.background(Color.White).fillMaxWidth())
}

จัดกลุ่มข้อมูลก่อน

เตรียมโครงสร้างข้อมูลที่จัดกลุ่มไว้ก่อนการประกอบ UI โดยมักใช้ groupBy ข้อมูลที่สะอาดทำให้การวนซ้ำสร้างส่วนต่าง ๆ สั้นและอ่านง่าย

val byLetter = names.groupBy { it.first() }

ส่วนหัวแบบติดค้างอยู่ใน LazyColumn

ตัวสร้าง stickyHeader เป็นส่วนหนึ่งของขอบเขต LazyColumn และทำงานได้เฉพาะภายในรายการแบบ lazy ไม่ใช่ Column แบบธรรมดา

รายการที่ดูเป็นมืออาชีพและสแกนหาได้ง่าย

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

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

ส่วนหัวแบบติดค้างทำหน้าที่อะไร

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

สรุป: ส่วนหัวที่ติดค้าง

สร้างส่วนต่าง ๆ โดยจับคู่ส่วนหัวกับ items จากนั้นเปลี่ยนเป็น stickyHeader เพื่อให้ป้ายชื่อกลุ่มถูกตรึงไว้ขณะเลื่อน อย่าลืมเพิ่มพื้นหลังด้วย 🎉

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

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

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

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

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

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

บทเรียน “ส่วนหัวติดด้านบนและรายการแบ่งส่วน” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

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