Jetpack Compose Glimmer 中的清單

適用的 XR 裝置
這份指南可協助您為這類 XR 裝置打造體驗。
瞭解 XR 裝置類型 →
顯示眼鏡
瞭解 XR 裝置類型 →

在 Jetpack Compose Glimmer 中，GlimmerLazyColumn 的運作方式與 Compose LazyColumn 類似，只會組合和配置可見項目，以維持高效能。不過，Glimmer 延遲資料欄是為顯示眼鏡控制項而建構，使用者是透過觸控板互動，而非觸控螢幕。行動裝置使用者隨時可以輕觸螢幕上的任何座標，但戴著顯示眼鏡的使用者只能與焦點所在項目互動。

圖 1. Jetpack Compose Glimmer 中不同樣式的清單範例。

焦點行為和子項

Glimmer 延遲資料欄會自動處理以焦點為主的導覽。與行動裝置清單不同，Glimmer 延遲資料欄會協調焦點和捲動作業，在使用者透過觸控板捲動時，透過子項移動焦點。清單本身無法成為焦點，因此會管理並要求子項的焦點，讓使用者在捲動時有明確的互動點。

由於沒有直接觸控輸入，請將 Glimmer 延遲資料欄內的所有子項設為可聚焦。當項目成為焦點時，也請提供視覺回應，例如顯示活動邊框或醒目顯示。使用者仍可捲動瀏覽無法聚焦的項目，但無法與這些項目互動。盡可能使用 ListItem 或 Card 等內建元件，因為這些元件已可聚焦，並提供聚焦狀態的視覺回饋。

範例：含有多個項目的 Glimmer 延遲資料欄

下列程式碼顯示如何使用 Glimmer 延遲資料欄，搭配項目和項目 DSL 方法建立項目清單：

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

範例：含標題位置的 Glimmer 延遲載入資料欄

Jetpack Compose Glimmer 也提供 GlimmerLazyColumn 的多載，其中包含標題位置。無法聚焦的標題 (通常是 TitleChip) 會固定在頂端中央，清單內容則會在標題下方捲動。

下列程式碼會建立具有標題 slot 的 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) } }
    }
}

使用 Glimmer 延遲清單狀態，以程式輔助方式執行清單作業

如要控管及觀察清單狀態的不同層面，例如使用 firstVisibleItemIndex 和 firstVisibleItemScrollOffset 屬性的捲動位置，請使用 GlimmerLazyListState。

您可以使用 rememberGlimmerLazyListState 升起這個狀態，以便使用 scrollToItem 和 animateScrollToItem 以程式輔助方式捲動。