คอมโพเนนต์ Jetpack Compose Glimmer ทั้งหมดได้รับการออกแบบมาให้ทำงานร่วมกับวิธีการป้อนข้อมูลมาตรฐาน เช่น การแตะหรือการปัดบนทัชแพดของแว่นตา ขณะเดียวกันก็รับคำสั่งป้อนข้อมูลระดับล่างที่เฉพาะเจาะจงกับฮาร์ดแวร์บนแว่นตาแสดงผลได้ด้วย คอมโพเนนต์ Jetpack Compose Glimmer จะจัดการเหตุการณ์อินพุตที่จำเป็นโดยอัตโนมัติ
สำหรับการดำเนินการมาตรฐาน เช่น การเลื่อนและการลาก ให้ใช้คอมโพเนนต์ Jetpack Compose Glimmer เพื่อมอบประสบการณ์การใช้งานที่สอดคล้องกัน อย่างไรก็ตาม สำหรับคอมโพเนนต์ที่กำหนดเองหรือ
ลักษณะการทำงานแบบอินเทอร์แอกทีฟที่กำหนดเอง คุณสามารถใช้ API ของ Compose ที่มีอยู่ เช่น
Modifier.draggable หรือ Modifier.scrollable
อินพุตตัวชี้และโฟกัส
บนแว่นตาแสดงผล อินพุตตัวชี้อาจส่งผลต่อโฟกัสได้ ดังนี้
- แตะ: การโต้ตอบโดยตรงเพื่อเปิดใช้งานองค์ประกอบ โฟกัสจะย้ายไปยังองค์ประกอบเมื่อผู้ใช้โต้ตอบกับองค์ประกอบนั้น
- ปัด: ใช้สำหรับการนำทางและการเลื่อน ท่าทางสัมผัสแบบปัดที่ไม่ได้จัดการจะแปลเป็นการเคลื่อนไหวของโฟกัสโดยอัตโนมัติ ซึ่งช่วยให้การไปยังส่วนต่างๆ ของ UI เป็นไปอย่างราบรื่นโดยไม่ต้องป้อนข้อมูลตัวชี้โดยตรง
ลักษณะการทำงานและลำดับการไปยังส่วนต่างๆ
การเคลื่อนไหวและลำดับของโฟกัสจะเปลี่ยนแปลงไปเมื่อผู้ใช้ไปยังส่วนต่างๆ ของแอป
การเคลื่อนไหวของโฟกัส
ในคอนเทนเนอร์ที่เลื่อนได้ โฟกัสจะเคลื่อนที่อย่างต่อเนื่องเมื่อปัดบนทัชแพด สำหรับองค์ประกอบที่ไม่ต่อเนื่อง เช่น แถวของปุ่ม การปัดแต่ละครั้งจะย้ายโฟกัสไปยังองค์ประกอบทีละรายการ
ลำดับโฟกัส
Jetpack Compose Glimmer ใช้การค้นหาโฟกัสแบบ 1 มิติเช่นเดียวกับใน Jetpack Compose ดูข้อมูลเพิ่มเติมเกี่ยวกับลำดับการส่งผ่านโฟกัสได้ที่ เปลี่ยนลำดับการส่งผ่าน โฟกัส
หากต้องการเปลี่ยนรายการที่โฟกัสเริ่มต้น คุณสามารถเพิ่มระดับบนสุด
Modifier.focusGroup() และระบุ onEnter
focusProperty ที่กำหนดเองได้ ดังนี้
Modifier.focusProperties {
onEnter = {
initialFocus.requestFocus()
// Prevent focus from exiting the group
cancelFocusChange()
}
}
.focusGroup()
คอนเทนเนอร์ที่เลื่อนได้
คอนเทนเนอร์ที่เลื่อนได้ เช่น รายการ ควรเป็นคอมโพเนนต์หลักเพียงรายการเดียวบนหน้าจอเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด หลีกเลี่ยงการวางรายการที่เลื่อนได้ไว้เหนือหรือใต้องค์ประกอบแบบอินเทอร์แอกทีฟอื่นๆ เช่น ปุ่ม เพื่อป้องกันความสับสนในการนำทาง และส่งเสริมการเคลื่อนไหวของโฟกัสที่ราบรื่นและคาดการณ์ได้
สถานะโฟกัสเริ่มต้น
Jetpack Compose Glimmer ใช้สถานะโฟกัสเริ่มต้นในคอมโพเนนต์แบบอินเทอร์แอกทีฟ ซึ่งรวมถึงพื้นผิว การ์ด และรายการในรายการ เพื่อส่งเสริมการแสดงผลด้วยภาพที่ชัดเจนและสอดคล้องกันระหว่างการโต้ตอบของผู้ใช้
ค่าเริ่มต้น: สีพื้นหลังของปุ่มได้มาจาก
GlimmerTheme.colors.surfaceส่วนเนื้อหาหลักจะคำนวณสีเนื้อหาของพื้นผิวนั้นโฟกัส: เพิ่มความกว้างของขอบเพื่อแสดงว่ามีการโฟกัส
โฟกัส + กด: ตั้งค่าพื้นหลังเป็น
GlimmerTheme.colors.surfaceที่ความทึบแสงเพิ่มขึ้นเพื่อแสดงว่ามีการ เลือก