Jetpack Compose Glimmer 中的图标

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

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

尺寸

虽然图标的默认大小由 LocalIconSize 提供，但您也可以使用提供的三种图标大小来设置特定大小。这些尺寸也默认用于以下情境：

尺寸令牌 默认使用政策

small

适用于标准列表项或小条状标签。

medium

适用于独立图标和标题 chip。

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。请使用这些尺寸，而不是对值进行硬编码，以保持界面的一致性。
  • 为图标提供本地化的 contentDescription。除非图标纯粹是装饰性的，否则请务必提供这些说明。