Jetpack Compose Glimmer 中的图标

适用的 XR 设备
本指南可帮助您为这些类型的 XR 设备打造体验。
了解 XR 设备类型 →
AI 眼镜
了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，Icon 组件专门用于渲染单色图标。Icon 可以接受 ImageVector、ImageBitmap 或 Painter 作为其来源。Icon 与 Text 类似，可以根据周围的界面主题智能地应用着色。 虽然默认大小由 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
                )
            }
        }
    }
}

代码要点

  • 该图标的来源使用 painterResource 加载本地 XML 矢量可绘制对象 (R.drawable.ic_star)，展示了将图标集成到 Jetpack Compose Glimmer 界面中的推荐方法，而不会产生外部库开销。
  • 通过使用修饰符设置 GlimmerTheme.iconSizes.large 来自定义图标的大小，演示如何替换 Jetpack Compose Glimmer 的预定义尺寸。
  • 通过使用色调参数设置 GlimmerTheme.colors.primary 来自定义图标的色调颜色，应用单色图标着色以保持视觉一致性。