Jetpack Compose Glimmer 中的清單項目

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

在 Jetpack Compose Glimmer 中,ListItem 是顯示單行內容的標準元件。清單項目是專為顯示眼鏡的焦點式互動設計,因此在取得焦點時會提供內建的視覺回應。

這個元件有兩個多載:一個是含有 onClick 參數,適用於會觸發動作的項目;另一個是僅可聚焦的版本,適用於不需要點擊動作的資訊內容。

圖 1. Jetpack Compose Glimmer 中兩個清單的清單項目樣式不同。

在清單中的使用方式

清單項目是清單中資料列的主要選擇,但清單也可以代管其他元件,例如 CardTitleChip,以提供不同的視覺重點。

清單項目會使用 headlineContent 插槽做為主要文字,以便與用於其他項目的 CardTitleChip 元件對齊。

示例:含有輔助標籤和圖示的清單項目

下列程式碼會建立清單項目,其中包含輔助標籤,以及開頭和結尾圖示:

@Composable
private fun ListItemWithSupportingLabelAndIcons() {
    ListItem(
        supportingLabel = { Text("Supporting Label") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        trailingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("Primary Label")
    }
}