Jetpack Compose Glimmer 中的图标

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

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

尺寸

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

尺寸 token 默认使用政策

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