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 IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

範例：彩色圖示

以下程式碼會使用主題的原色建立彩色圖示：

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

範例：不同大小的圖示

下列程式碼會建立經過修改的圖示，並將大小設為特定值：

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

程式碼重點

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