Jetpack Compose Glimmer 中的圖示

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

在 Jetpack Compose Glimmer 中，Icon 元件是用於算繪單色圖示的 UI 元素。圖示會智慧處理著色和縮放，確保圖示清晰可辨，並與 GlimmerTheme 保持視覺一致性。

大小

圖示預設會採用 LocalIconSize 提供的大小，但您也可以使用提供的三種圖示大小來設定特定大小。在下列情況中，系統也會預設使用這些尺寸：

大小權杖 預設使用政策

small

適用於標準清單項目或小型方塊。

medium

適用於獨立圖示和標題資訊方塊。

large

適用於卡片等高度強調的元件。

圖示來源

圖示可接受 ImageVector、ImageBitmap 或 Painter 做為來源。定義自己的圖示時，請盡可能使用 ImageVector，確保圖示在顯示眼鏡上以任何比例顯示時，都能清楚呈現。

顏色和色調

  • 自動色調：圖示會根據父項介面提供的 LocalContentColor LocalContentColor 決定顏色，例如 surface 或 Button。
  • 手動著色：使用 tint 參數套用特定顏色。
  • 多色素材資源：如要避免圖示著色 (例如多色品牌標誌)，請設定 tint = Color.Unspecified。
  • 一般圖片：如果相片或一般圖片不符合圖示大小和著色規則，請改用標準的 androidx.compose.foundation.Image。

範例：介面中的基本圖示

下列程式碼會建立放置在圓形介面中的圖示，並使用主題的主色：

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}

範例：不同大小的圖示

下列程式碼會顯示不同大小的圖示：

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}

程式碼重點

  • 使用 GlimmerTheme.iconSizes 和修飾符，自訂每個圖示的大小。圖示的預設值為 GlimmerTheme.iconSizes.medium。請使用這些大小，而非硬式編碼值，確保 UI 的一致性。
  • 為每個圖示提供本地化 contentDescription。除非圖示只有裝飾功能，否則請務必提供這些說明。