Jetpack Compose Glimmer 中的清單

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

在 Jetpack Compose Glimmer 中，清單是垂直捲動的 UI 元件，只會有效率地轉譯可見項目，專為 AI 眼鏡應用程式提供特定行為和輸入相容性。Jetpack Compose Glimmer 會使用 VerticalList 和 ListItem 元件達成這項目的。

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

VerticalList 是 Jetpack Compose Glimmer 的元件，用於顯示可捲動的直向內容。這個程式庫提供的 API 功能與 LazyColumn 相同，但行為經過特別最佳化，適用於 Jetpack Compose Glimmer 和搭載螢幕的 AI 眼鏡。

Jetpack Compose Glimmer 清單有一些獨特的限制：

  • 如果清單中的項目超過檢視區塊可容納的數量，清單邊界附近就會顯示黑色半透明遮罩。

範例：顯示含有三個項目的直向清單

下列程式碼顯示如何使用 VerticalList 和 ListItem 元件建立三個項目的清單：

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

程式碼重點

  • 清單會顯示三個動態產生的項目，每個項目都是 ListItem。
  • 每個 ListItem 都可以自訂，並新增圖示。