Jetpack Compose Glimmer 基于 Jetpack Compose 构建,包含专为带显示屏的 AI 眼镜设计的可组合项、组件、行为和主题。借助 Glimmer,您可以使用 Compose 为 AI 眼镜构建原生界面,利用更少的代码、强大的工具和直观的 Kotlin API 打造生动而精彩的应用体验。
Jetpack Compose Glimmer 可组合项
Jetpack Compose Glimmer 提供专为 AI 眼镜显示屏量身打造的 @Composable 函数,例如 Text、Button 和 ListItem。以下是 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 构建自定义组件。Surface 是 Jetpack Compose Glimmer 中最基本的构建块,可作为空白画布,用于构建任何特定的自定义设计或互动。
Jetpack Compose Glimmer 修饰符
Jetpack Compose Glimmer 中的修饰符与 Compose 修饰符完全相同,可让您通过自定义可组合项的布局、外观和行为来增强可组合项。Jetpack Compose Glimmer 可能会引入特定的修饰符,或为眼镜特定的视觉反馈和性能应用独特的默认值。
Jetpack Compose Glimmer 深度
Jetpack Compose Glimmer 组件使用深度来表示层次结构,这有助于直观地区分显示在其他卡片上方(顶部)的元素。AI 眼镜上的深度是 z 空间中的放置位置和阴影的组合。对于大多数高级别组件(例如列表项),系统会根据焦点状态自动应用深度。当某个组件获得焦点时,它会增加深度;当它失去焦点时,会恢复到正常状态。不过,对于使用自定义组件,您可以在 Modifier.surface 或 Modifier.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 眼镜显示屏上呈现。
GlimmerTheme中的颜色概览。请注意,“On ...”颜色不会通过 GlimmerTheme 公开。这些颜色由系统根据背景颜色自动计算得出。
这些颜色通过 GlimmerTheme.colors.primary 公开,每种颜色角色的值如下表中所述:
颜色角色 |
默认值 |
|---|---|
主要 |
#A8C7FA |
次要 |
#4C88E9 |
正面 |
#4CE995 |
负 |
#F57084 |
surface |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
请注意,虽然 surface、outline 和 outlineVariant 被标记为可自定义,但我们强烈建议您不要自定义这些值。
形状
Jetpack Compose Glimmer 的形状系统为组件定义了一组标准的边角处理方式和几何形状,旨在为 AI 眼镜界面创建一致且简约的视觉语言,所有形状都通过 GlimmerTheme.shapes 公开。
排版
Jetpack Compose Glimmer 的排版系统包含六种排版样式,可在 AI 眼镜显示屏上实现清晰易读且简洁的效果。这些样式旨在通过更粗的字重、更宽的字母间距和适当的行高来最大限度地提高对比度并改善文字可读性。这些样式通过 GlimmerTheme.typography 公开。
图标
Jetpack Compose Glimmer 的图标系统旨在与 AI 眼镜界面的简化视觉语言相干地集成,通常会利用圆形形状(例如 Material Symbols Rounded)来实现最佳的可读性。