Jetpack Compose Glimmer 中的圖示

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

在 Jetpack Compose Glimmer 中，Icon 元件專門用於算繪單色圖示。Icon 可以接受 ImageVector、ImageBitmap 或 Painter 做為來源。Icon 與 Text 類似，可根據周圍的 UI 主題智慧地套用色調。雖然預設大小是由 LocalIconSize 提供，但您也可以設定自訂圖示大小。

範例：建立含有大型星號圖示的方塊

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

程式碼重點

  • 圖示來源會載入本機 XML 向量可繪項目 (R.drawable.ic_star)，使用 painterResource 示範將圖示整合至 Jetpack Compose Glimmer UI 的建議做法，不會造成外部程式庫負擔。
  • 透過修飾符設定 GlimmerTheme.iconSizes.large，即可自訂圖示大小，示範如何覆寫 Jetpack Compose Glimmer 的預先定義大小。
  • 透過設定 GlimmerTheme.colors.primary 的色調參數，自訂圖示的色調顏色，並套用單色圖示色調，確保視覺一致性。