รายการใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทนี้
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
Display Glasses
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

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

รูปที่ 1 ตัวอย่างรายการรูปแบบต่างๆ ใน Jetpack Compose Glimmer

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

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

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

ตัวอย่าง: รายการแนวตั้งที่มีหลายรายการ

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

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

ตัวอย่าง: รายการแนวตั้งที่มีช่องชื่อ

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

โค้ดต่อไปนี้สร้างรายการแนวตั้งที่มีช่องชื่อ

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

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

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

คุณยกสถานะนี้ขึ้นได้โดยใช้ rememberListState เพื่อเลื่อนโดยอัตโนมัติ โดยใช้ scrollToItem และ animateScrollToItem