Jetpack Compose Glimmer 中的图标

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
显示眼镜
了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，Icon 组件是一个用于 渲染单色图标的界面元素。图标可以智能地处理着色和缩放，以便它们保持清晰，并且在视觉上与 GlimmerTheme 保持一致。

尺寸

虽然图标默认采用 LocalIconSize 提供的尺寸，但您也可以 使用提供的三种图标尺寸来设置特定尺寸。在以下情况下，这些尺寸也会默认使用：

尺寸 token 默认使用政策

small

适用于标准列表项或小型芯片。

medium

适用于独立图标和标题芯片。

large

适用于卡片等高强调组件。

图标来源

图标可以接受 ImageVector、ImageBitmap 或 Painter 作为 其来源。在定义自己的图标时，请尽可能使用 ImageVector，以便在显示眼镜上以任何比例呈现清晰的渲染效果。

颜色和着色

  • 自动着色：图标根据父界面提供的 LocalContentColorLocalContentColor 解析其颜色，例如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。请使用这些尺寸，而不是对值进行硬编码，以确保整个界面的一致性。
  • 为每个图标提供本地化的 contentDescription。除非图标纯粹是装饰性的，否则请务必提供这些说明。