Jetpack Compose Glimmer 中包含的内容

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

Jetpack Compose Glimmer 基于 Jetpack Compose 构建,包含专为带显示屏的 AI 眼镜设计的可组合项、组件、行为和一个主题。借助 Glimmer,您可以使用 Compose 为 AI 眼镜构建原生界面,利用更少的代码、强大的工具和直观的 Kotlin API 打造生动而精彩的应用体验。

Jetpack Compose Glimmer 可组合项

Jetpack Compose Glimmer 提供专为 AI 眼镜显示屏量身打造的 @Composable 函数,例如 TextButtonListItem。以下是 Jetpack Compose Glimmer 可组合函数的独特特征:

  • 简化的样式Surface 组件(例如)默认采用黑色或透明背景,以实现光学显示优化。
  • 优化了默认颜色:Jetpack Compose Glimmer 默认根据背景颜色计算内容颜色,因此开发者很少需要手动设置文本颜色,从而在无需任何额外工作的情况下提高可读性。
  • 差异化焦点:使用基于轮廓的视觉反馈(而非涟漪效果)来指示焦点,从而提高清晰度。

    图 1. Jetpack Compose Glimmer 中的三种焦点状态,通过基于轮廓的视觉反馈来区分。
  • 优化的升降效果:Jetpack Compose Glimmer 使用有限的阴影来分隔视觉元素

    图 2. Jetpack Compose Glimmer 中的五个高度级别,使用有限的阴影进行区分。

Jetpack Compose Glimmer 组件

Jetpack Compose Glimmer 具有自己的一组自定义设计的组件,类似于 Jetpack Compose 中的组件,但专门针对 AI 眼镜独特的视觉和互动需求进行了优化。Jetpack Compose Glimmer 组件可通过 Jetpack Compose Glimmer 的主题进行自定义,并基于较低级别的 Compose 功能构建,以默认支持点按和滑动等用户输入方法。

如需详细了解如何使用特定组件,请参阅以下指南:

如果其中一个高级别组件不适用于您的用例,您可以使用 surface 构建自定义组件。在 Jetpack Compose Glimmer 中,Surface 是最基本的构建块,可作为空白画布来构建任何特定的自定义设计或互动。

Jetpack Compose Glimmer 修饰符

Jetpack Compose Glimmer 中的修饰符与 Compose 修饰符的功能完全相同,可让您通过自定义可组合项的布局、外观和行为来增强可组合项。Jetpack Compose Glimmer 可能会引入特定的修饰符,或应用独特的默认设置,以实现眼镜特定的视觉反馈和性能。

Jetpack Compose Glimmer 深度

Jetpack Compose Glimmer 组件使用深度来表示层次结构,这有助于直观地区分显示在其他卡片上方(顶部)的元素。AI 眼镜上呈现的深度由 z 轴空间中的放置位置与阴影共同构成。对于大多数高级别组件(例如列表项),系统会根据焦点状态自动应用深度。当某个组件获得焦点时,其深度会增加;当该组件失去焦点时,其会恢复到正常状态。不过,对于使用自定义组件,您可以在 Modifier.surfaceModifier.depth 上使用 depth 参数。

Jetpack Compose Glimmer 的主题

Jetpack Compose Glimmer 具有专门针对 AI 眼镜的主题设置系统。Jetpack Compose Glimmer 的主题实现了一个简化且优化的颜色、字体排版和形状调色板。这样可确保 AI 眼镜获得尽可能高的可见度和简洁性。所有 Jetpack Compose Glimmer 组件都旨在与 AI 眼镜的特定输入方法自动集成。Jetpack Compose Glimmer 的主题通过 GlimmerTheme 类公开。

Jetpack Compose 中的其他主题一样,GlimmerTheme 包含多个子系统:颜色、形状、排版和图标(符号学)。Jetpack Compose Glimmer 的主题还包含可自定义的 Jetpack Compose Glimmer 组件

颜色

Jetpack Compose Glimmer 的颜色系统在其优化后的调色板中包含七种颜色,旨在最大限度地提高 AI 眼镜显示屏上的可见性和简洁性,因为黑色值不会在 AI 眼镜显示屏上呈现。

图 3. GlimmerTheme 中的颜色概览。

请注意,“On ...”颜色不会通过 GlimmerTheme 公开。这些颜色由系统根据背景颜色自动计算得出。

这些颜色通过 GlimmerTheme.colors.primary 公开,每种颜色角色的值如下表中所述:

颜色角色

默认值

主要

#9BBFFF

次要

#4C88E9

正面

#63FEA8

#FFA7A0

surface

#262626

outline

#606460

outlineVariant

#42434A

请注意,虽然 surfaceoutlineoutlineVariant 被标记为可自定义,但我们强烈建议您不要自定义这些值。

形状

Jetpack Compose Glimmer 的形状系统为组件定义了一组标准边角处理方式和几何形状,旨在为 AI 眼镜界面创建一致且简约的视觉语言,所有形状均通过 GlimmerTheme.shapes 公开。

图 4. Jetpack Compose Glimmer 中大、中、小形状的示例。

排版

Jetpack Compose Glimmer 的排版系统包含六种排版样式,可在 AI 眼镜显示屏上实现清晰易读且简洁的效果。这些样式旨在通过更粗的字重、更宽的字母间距和适当的行高来最大限度地提高对比度并改善文字可读性。这些样式通过 GlimmerTheme.typography 公开。

图 5. Jetpack Compose Glimmer 的六种排版样式的示例。

图标

Jetpack Compose Glimmer 的图标系统旨在与 AI 眼镜界面的简化视觉语言相干地集成,通常会利用圆形形式(例如 Material Symbols Rounded)来实现最佳可读性。