ทำความเข้าใจระยะการเลื่อน

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

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

ดังที่แสดงในรูปที่ 1 กระบวนการเลื่อนจะทำตามลำดับต่อไปนี้

1. Overscroll: รับเดลต้าอินพุตเริ่มต้นก่อน ซึ่งทำให้ Overscroll มีโอกาสตอบสนองก่อน (เช่น โดยการผ่อนคลายเอฟเฟกต์การยืดที่ใช้งานอยู่)
2. การเลื่อนก่อนการเลื่อนที่ซ้อนกัน: ให้โอกาสในการตอบสนองต่อเดลต้าอินพุตก่อนระยะการเลื่อน ในระยะนี้ ระบบอาจใช้เดลต้าอินพุตบางส่วน หรืออาจเพียงตรวจสอบเพื่อทริกเกอร์การเปลี่ยนแปลง UI เช่น การยุบหรือขยายแถบแอป
3. Transform input delta: ปรับเครื่องหมายของเดลต้าอินพุตดิบตามการวางแนวและทิศทางของเลย์เอาต์เพื่อให้แน่ใจว่าลักษณะการเลื่อนเป็นไปอย่างเป็นธรรมชาติ ดูข้อมูลเพิ่มเติมได้ที่ส่วนเดลต้าอินพุตการเปลี่ยนรูปแบบ
4. เลื่อน: ระยะนี้จะได้รับเดลต้าอินพุตที่พร้อมใช้งานและยังไม่ได้ใช้ซึ่งปรับให้ตรงกับการกำหนดค่าคอนเทนเนอร์การเลื่อน โดยปกติแล้วจะใช้เดลต้านี้เพื่ออัปเดตออฟเซ็ตการเลื่อนของตัวเอง
5. เปลี่ยนกลับเป็นเดลต้าอินพุตดิบ: เปลี่ยนเดลต้าที่ใช้ได้และใช้ไปแล้วจากระยะเลื่อนกลับเป็นเครื่องหมายเดลต้าอินพุตดิบเดิม
6. การเลื่อนที่ฝังอยู่หลังการเลื่อน: ระยะนี้จะตอบสนองหลังจากระยะการเลื่อนหลักเสร็จสมบูรณ์ โดยจะรับเดลต้าที่อัปเดตใหม่ซึ่งพร้อมใช้งานและใช้ไปแล้ว โดยสามารถใช้ข้อมูลที่เหลืออยู่ซึ่งพร้อมใช้งาน หรือใช้บริบทของสิ่งที่เพิ่งใช้ไป
7. การเลื่อนเกิน: ระยะสุดท้ายนี้จะพิจารณาเดลต้าที่ใช้ได้และใช้ไปแล้วขั้นสุดท้าย โดยทั่วไปแล้ว อินพุตที่เหลืออยู่ซึ่งเข้าสู่ขั้นตอนนี้จะใช้เพื่อสร้างเอฟเฟกต์ขอบ เช่น การยืดหรือเรืองแสง ซึ่งบ่งบอกว่าผู้ใช้ได้ถึงขอบเขตของพื้นที่ที่เลื่อนได้แล้ว

เปลี่ยนรูปแบบเดลต้าอินพุต

เดลต้าอินพุตของเคอร์เซอร์ต้องมีการปรับเครื่องหมายในระยะการเลื่อนเพื่อให้ตรงกับสัญญาที่คาดไว้ ก่อนที่เดลต้าจะถึงระยะเลื่อน ตัวแก้ไขการเลื่อนจะปรับเดลต้าอินพุตตามการวางแนว ทิศทางเลย์เอาต์ และบริบท RTL ซึ่งเกิดขึ้นเนื่องจากอินพุตข้อมูลดิบจะติดตามการเคลื่อนไหวของพิกเซลทางกายภาพของตัวชี้บนหน้าจอ (เช่น การเลื่อนลงจะเพิ่มพิกัด Y ของหน้าจอ ซึ่งทำให้เกิดเดลต้าที่เป็นบวก) อย่างไรก็ตาม เพื่อให้ได้ "การเลื่อนที่เป็นธรรมชาติ" ซึ่งเนื้อหาจะเลื่อนตามนิ้วของคุณ การลากลงหมายความว่าวิวพอร์ตต้องเลื่อนขึ้นเหนือเนื้อหา ซึ่งสอดคล้องกับออฟเซ็ตการเลื่อนเชิงลบ

เดลต้าอินพุตจากแหล่งอินพุตอื่นๆ เช่น ลูกกลิ้งเมาส์หรือทัชแพด จะไม่เปลี่ยนรูปแบบตลอดระยะการเลื่อน

ตัวอย่าง: ตัวชี้เลื่อนไปทางขวาโดยใช้ Modifier.horizontalScroll()

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

• ก่อนเลื่อน: ท่าทางสัมผัสเริ่มต้นด้วยเดลต้าอินพุตดิบเชิงบวกที่ 100
  • Overscroll จะสังเกตเห็นเหตุการณ์นี้และใช้ไป 10 เหลือ 90
  • การเลื่อนก่อนเลื่อนที่ซ้อนกันช่วยให้คอมโพเนนต์หลักมีโอกาสตอบสนอง โดยใช้ 30 เดลตาดิบที่เหลือคือ 60
• การเปลี่ยนรูปแบบ A: ก่อนเข้าสู่ระยะเลื่อน horizontalScroll จะกลับค่าเดลต้าดิบเชิงบวกที่เหลืออยู่ (60) เป็นเดลต้าเชิงลบ (-60) ซึ่งจะช่วยให้มั่นใจว่าวิวพอร์ตเลื่อนไปทางซ้ายเพื่อให้เนื้อหาดูเหมือนเลื่อนไปทางขวาตามนิ้วของผู้ใช้
• เลื่อน: คอมโพเนนต์เป้าหมายที่เลื่อนได้จะใช้ส่วนหนึ่งของเดลต้าที่เปลี่ยนรูปแบบนี้เพื่ออัปเดตออฟเซ็ตการเลื่อน ในตัวอย่างนี้ ระบบจะใช้ -30 และเหลือ -30 ที่ไม่ได้ใช้
• การเปลี่ยนรูปแบบ B: เดลต้าการเลื่อนที่ไม่ได้ใช้ (-30) จะถูกแปลงกลับเป็นเดลต้าดิบเชิงบวก (30) เพื่อให้ตรงกับสัญญาของการเลื่อนที่ฝังอยู่และการเลื่อนเกิน
• หลังการเลื่อน: ระบบจะส่งเดลตาดิบที่เหลือกลับไปยังไปป์ไลน์
  • การเลื่อนที่ฝังอยู่หลังการเลื่อนใช้ไป 10 เหลือ 20
  • เอฟเฟกต์การเลื่อนเกินจะใช้ 20 สุดท้ายเพื่อขับเคลื่อนเอฟเฟกต์ขอบภาพ เช่น การยืดหรือเรืองแสง ซึ่งจะแก้ไขเดลต้าอินพุตเป็น 0 โดยสมบูรณ์

ข้อมูลอ้างอิงการเปลี่ยนรูปแบบเดลต้าของอินพุตตัวชี้

ตารางต่อไปนี้แสดงวิธีลงนามเดลต้าอินพุตในระยะและทิศทางต่างๆ สำหรับอินพุตเคอร์เซอร์

	เดลต้าอินพุตดิบ	เอฟเฟกต์การเลื่อนเกิน	การเลื่อนที่ฝังไว้	scrollableArea ที่มีการวางแนวนอน	scrollableArea ที่มีการวางแนวนอน (กลับด้าน)	scrollableArea ที่มีการวางแนวตั้ง	scrollableArea ที่มีการวางแนวตั้ง (กลับด้าน)
ตัวชี้เลื่อนขึ้น	ลบ	ลบ	ลบ	ไม่มี	ไม่มี	บวก	ลบ
ตัวชี้เลื่อนลง	บวก	บวก	บวก	ไม่มี	ไม่มี	ลบ	บวก
ตัวชี้เลื่อนไปทางซ้าย	ลบ	ลบ	ลบ	บวก (ลบสำหรับ RTL)	ค่าลบ (ค่าบวกสำหรับ RTL)	ไม่มี	ไม่มี
ตัวชี้เลื่อนไปทางขวา	บวก	บวก	บวก	ค่าลบ (ค่าบวกสำหรับ RTL)	บวก (ลบสำหรับ RTL)	ไม่มี	ไม่มี