การเชื่อมต่อการเลื่อนซ้อนกัน
ประสานการเลื่อนระหว่างคอนเทนเนอร์
การเชื่อมต่อการเลื่อนซ้อนกัน เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเลื่อนซ้อนการเลื่อน
บางครั้งพื้นที่เลื่อนหนึ่งอยู่ภายในอีกพื้นที่เลื่อนหนึ่ง เช่น รายการที่อยู่ใต้ส่วนหัวซึ่งยุบได้ การเลื่อนซ้อน ช่วยให้ทั้งสองทำงานร่วมกันแทนที่จะขัดแย้งกัน 📜
ปัญหาการประสานงาน
หากไม่มีตัวช่วย รายการด้านในจะรับการปัดทุกครั้งและคอนเทนเนอร์ด้านนอกจะไม่เคลื่อนที่ NestedScrollConnection จะแบ่งการเลื่อนระหว่างทั้งสอง
พบกับ nestedScroll
เพิ่มตัวปรับแต่ง nestedScroll แล้วส่งการเชื่อมต่อเข้าไป การเชื่อมต่อนี้จะดักจับค่าความเปลี่ยนแปลงของการเลื่อนขณะที่ส่งขึ้นไปตามลำดับชั้น
Modifier.nestedScroll(connection)การเลื่อนก่อน: ได้สิทธิ์ก่อน
องค์ประกอบแม่จะได้รับโอกาสก่อนองค์ประกอบลูกผ่าน onPreScroll ให้คืนค่าปริมาณของความเปลี่ยนแปลงที่คุณใช้ไป ส่วนที่เหลือจะส่งต่อไปยังองค์ประกอบลูก
override fun onPreScroll(available: Offset, source): Offsetการเลื่อนหลัง: ส่วนที่เหลือ
หลังจากองค์ประกอบลูกเลื่อนแล้ว onPostScroll จะส่งค่าความเปลี่ยนแปลงที่ยังไม่ได้ใช้กลับมาให้องค์ประกอบแม่ ใช้ค่านี้เพื่อเลื่อนส่วนหัวเมื่อรายการเลื่อนไปถึงขอบ
override fun onPostScroll(consumed, available, source): Offsetใช้เท่าที่จำเป็น
ในการเรียกกลับแต่ละครั้ง ให้คืนค่า Offset ของปริมาณที่คุณใช้ไป หากต้องการส่งต่อทุกอย่างให้ผู้ร่วมประมวลผลถัดไป ให้คืนค่า Offset.Zero
return Offset(0f, consumedY)ระยะการเหวี่ยงก็เช่นกัน
สำหรับแรงส่งยังมีการเรียกกลับ onPreFling และ onPostFling ที่สอดคล้องกัน ทั้งสองเป็นฟังก์ชันที่พักการทำงานได้ จึงทำแอนิเมชันขณะการเหวี่ยงสิ้นสุดลงได้
override suspend fun onPreFling(available: Velocity): Velocityจดจำการเชื่อมต่อ
ครอบการเชื่อมต่อด้วย remember เพื่อให้คงอยู่เมื่อเกิดการประกอบใหม่ และเก็บสถานะที่การเชื่อมต่ออ่านไว้ภายใน เช่น ออฟเซ็ตของส่วนหัว
val connection = remember { object : NestedScrollConnection {...} }คลาสสิก: แถบเครื่องมือยุบได้
การใช้งานที่โดดเด่นคือ แถบเครื่องมือยุบได้ โดยย่อแถบด้านบนด้วยการเลื่อนก่อนขณะที่รายการเลื่อน แล้วขยายกลับเมื่อเลื่อนย้อนขึ้น
หลายครั้งทำงานได้ทันที
องค์ประกอบสำเร็จรูปจำนวนมาก เช่น Scaffold ที่มีพฤติกรรมการเลื่อน จะเชื่อมระบบการเลื่อนซ้อนให้คุณอยู่แล้ว ให้สร้างการเชื่อมต่อแบบกำหนดเองเฉพาะเมื่อต้องการควบคุมอย่างละเอียด
ใส่ใจแหล่งที่มา
การเรียกกลับแต่ละครั้งจะได้รับค่า แหล่งที่มา เพื่อบอกว่าการเลื่อนเกิดจากการลากหรือการเหวี่ยง ใช้ค่านี้เพื่อให้ตอบสนองต่อการสัมผัสและแรงส่งแตกต่างกัน
if (source == NestedScrollSource.Drag) { /* ... */ }ตรวจสอบความเข้าใจ
การเรียกกลับใดทำให้องค์ประกอบแม่ใช้การเลื่อนได้ก่อนองค์ประกอบลูก
ทบทวน: การเลื่อนที่สอดคล้องกัน
คุณได้เรียนรู้ NestedScrollConnection ร่วมกับการเลื่อนและการเหวี่ยงก่อนและหลัง ซึ่งเป็นกุญแจสำคัญของแถบเครื่องมือยุบได้และรายการที่ทำงานร่วมกัน 🎉
เรียนรู้ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- pointerInput และ detectTapGestures
- ลาก ปัด และสะบัด
- การแปลง: เลื่อน ซูม และหมุน
- การเชื่อมต่อการเลื่อนซ้อนกัน