Text in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen
Displaybrillen
Informationen zu XR‑Gerätetypen

In Jetpack Compose Glimmer können Sie mit der Komponente Text verschiedene Text eigenschaften wie Farbe, Schriftgröße, Schriftstil, Schriftstärke, Schriftfamilie, Buchstaben abstand und Textausrichtung festlegen.

Der Text in Jetpack Compose Glimmer ist einzigartig, da er Farben intelligent abgleicht. Wenn beispielsweise keine Farbkorrektur festgelegt wurde, wird für den Text standardmäßig die Inhaltsfarbe verwendet, die von der nächstgelegenen Oberfläche bereitgestellt wird.

Beispiel: Textüberschrift in einem Feld erstellen

@Composable
fun TextSample() {
    Text(
        text = "Hello Glimmer",
        style = GlimmerTheme.typography.titleLarge
    )
}

Wichtige Informationen zum Code

  • Da keine Farbe angegeben ist, wird für diesen Text die nächstgelegene Oberfläche verwendet, um die am besten lesbare Farbe auszuwählen (in der Regel Weiß).

Größe

Die Typografieskala in Jetpack Compose Glimmer ist deutlich größer als im Standard-Material Design für Mobilgeräte. Die Stile TitleLarge und BodyLarge haben beide die Größe 30.sp und die Beschriftung 18.sp:

Stil Größe (sp) Stärke Zeilenhöhe

titleLarge

30

750

36.sp

titleMedium

24

750

28.sp

titleSmall

20

750

28.sp

bodyLarge

30

520

36.sp

bodyMedium

24

520

36.sp

bodySmall

20

520

28.sp

caption

18

650

24.sp

Google Sans Flex verwenden

Google Sans Flex ist eine variable Schriftart, die speziell für AI Displaybrillen ausgewählt wurde und als Teil von Jetpack Compose Glimmer bereitgestellt wird. Die abgerundeten Ecken und anpassbaren Achsen der Schriftart ermöglichen eine ideale optische Größe, sodass der Text auf einen Blick erkennbar und lesbar bleibt. Verwenden Sie nach Möglichkeit Google Sans Flex für alle Texte, die auf Displaybrillen angezeigt werden, um die Konsistenz für Nutzer zwischen Ihrer App und dem System zu verbessern.

Wenn Sie Google Sans Flex verwenden möchten, fügen Sie die Bibliothek glimmer-google-fontsden Abhängigkeiten Ihrer App hinzu und wenden Sie die Schriftart dann global auf das GlimmerTheme an:

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}