Jetpack Compose Glimmer 中的清單

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

在 Jetpack Compose Glimmer 中，VerticalList 的運作方式與 Compose LazyColumn 類似，只會組合和配置可見項目，以維持高效能。不過，對於 Jetpack Compose Glimmer，系統會建構垂直清單來顯示智慧眼鏡控制項，使用者是透過觸控板而非觸控螢幕與這些控制項互動。行動裝置使用者隨時可以輕觸螢幕上的任何座標，但使用智慧眼鏡的使用者只能與焦點所在項目互動。

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

焦點行為和子項

垂直清單經過最佳化處理，可自動處理以焦點為主的導覽。與行動裝置清單不同 (行動裝置清單通常會分開處理焦點和捲動)，垂直清單會協調這兩項作業，在使用者透過觸控板捲動時，將焦點移至子項目。清單本身無法成為焦點，因此會管理及要求子項的焦點，讓使用者在捲動時清楚知道互動點。

由於沒有直接觸控輸入，請將垂直清單內的所有子項設為可聚焦，並在項目聚焦時提供視覺回應，例如顯示有效邊框或醒目顯示。使用者仍可捲動瀏覽無法聚焦的項目，但無法與這些項目互動。盡可能在直向清單中使用 ListItem 或 Card 等內建元件，因為這些元件已可聚焦，並提供聚焦狀態的視覺回饋。

範例：含有多個項目的直向清單

下列程式碼說明如何使用垂直清單和項目 DSL 方法建立項目清單：

@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 以程式輔助方式捲動。