รายการใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ

ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →

ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →

ใน Jetpack Compose Glimmer นั้น GlimmerLazyColumn จะทำงานคล้ายกับ LazyColumn ของ Compose โดยจะคอมโพสและจัดวางเฉพาะรายการที่มองเห็นได้เพื่อ รักษาประสิทธิภาพการทำงานที่สูง อย่างไรก็ตาม คอลัมน์แบบ Lazy ของ Glimmer สร้างขึ้นเพื่อใช้ควบคุมแว่นตาแสดงผล ซึ่งผู้ใช้จะโต้ตอบโดยใช้ทัชแพดแทนหน้าจอสัมผัส ในขณะที่ผู้ใช้มือถือสามารถแตะพิกัดใดก็ได้บนหน้าจอทุกเมื่อ แต่ผู้ใช้แว่นตาแสดงผลจะโต้ตอบได้เฉพาะกับรายการที่โฟกัสอยู่เท่านั้น

ลักษณะการทำงานของการโฟกัสและรายการย่อย

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

เนื่องจากไม่มีการป้อนข้อมูลด้วยการสัมผัสโดยตรง ให้ทำรายการย่อยทั้งหมดในคอลัมน์แบบ Lazy ของ Glimmer ให้โฟกัสได้ เมื่อรายการโฟกัสอยู่ ให้แสดงการตอบสนองด้วยภาพด้วย เช่น เส้นขอบหรือการไฮไลต์ที่ใช้งานอยู่ แม้ว่าผู้ใช้จะยังเลื่อนผ่านรายการที่โฟกัสไม่ได้ แต่ก็โต้ตอบกับรายการเหล่านั้นไม่ได้ ใช้คอมโพเนนต์ที่มีให้ในฟีเจอร์ เช่น ListItem หรือ Card ทุกครั้งที่ทำได้ เนื่องจาก คอมโพเนนต์เหล่านี้โฟกัสได้อยู่แล้วและแสดงความคิดเห็นด้วยภาพสำหรับสถานะการโฟกัส

ตัวอย่าง: คอลัมน์แบบ Lazy ของ Glimmer ที่มีหลายรายการ

โค้ดต่อไปนี้แสดงวิธีใช้คอลัมน์แบบ Lazy ของ Glimmer กับเมธอด DSL ของรายการและรายการเพื่อสร้างรายการไอเทม

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

ตัวอย่าง: คอลัมน์แบบ Lazy ของ Glimmer ที่มีช่องใส่ชื่อ

Jetpack Compose Glimmer ยังมีการโอเวอร์โหลดของ GlimmerLazyColumn ที่มีช่องใส่ชื่อ ชื่อที่โฟกัสไม่ได้ ซึ่งโดยปกติจะเป็น TitleChip, จะยังคงอยู่ตรงกลางด้านบนในขณะที่เนื้อหารายการเลื่อนอยู่ด้านล่าง

โค้ดต่อไปนี้จะสร้างคอลัมน์แบบ Lazy ของ Glimmer ที่มีช่องใส่ชื่อ

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

ใช้สถานะรายการแบบ Lazy ของ Glimmer สำหรับการดำเนินการกับรายการแบบเป็นโปรแกรม

หากต้องการควบคุมและสังเกตลักษณะต่างๆ ของสถานะรายการ เช่น ตำแหน่งการเลื่อนโดยใช้พร็อพเพอร์ตี้ firstVisibleItemIndex และ firstVisibleItemScrollOffset ให้ใช้ GlimmerLazyListState

คุณสามารถ ยกสถานะนี้ โดยใช้ rememberGlimmerLazyListState เพื่อ เลื่อนแบบเป็นโปรแกรมโดยใช้ scrollToItem และ animateScrollToItem