Testo in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Occhiali con display

In Jetpack Compose Glimmer, il componente Text ti consente di impostare varie proprietà del testo , tra cui colore, dimensione, stile, spessore e famiglia di caratteri, oltre alla spaziatura tra le lettere e all'allineamento del testo.

Il testo di Jetpack Compose Glimmer è unico nel suo genere perché gestisce in modo intelligente la corrispondenza dei colori. Ad esempio, se non viene specificato alcun override del colore, il testo assume per impostazione predefinita il colore dei contenuti fornito dalla superficie più vicina su cui si trova.

Esempio: crea un'intestazione di testo in una casella

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

Punti chiave sul codice

  • Poiché non è specificato alcun colore, questo testo esamina la superficie più vicina per scegliere il colore più leggibile (in genere il bianco).

Taglie

La scala tipografica in Jetpack Compose Glimmer è notevolmente più grande del Material Design mobile standard. Gli stili come TitleLarge e BodyLarge sono entrambi 30.sp e la didascalia è 18.sp:

Stile Dimensioni (sp) Peso Altezza riga

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

didascalia

18

650

24.sp

Utilizzare Google Sans Flex

Google Sans Flex è un carattere variabile scelto appositamente per gli occhiali con AI e fornito come parte di Jetpack Compose Glimmer. Gli angoli arrotondati e gli assi regolabili del carattere consentono di ottenere dimensioni ottiche ideali, garantendo che il testo rimanga leggibile e visibile a colpo d'occhio. Se possibile, per migliorare la coerenza per gli utenti tra l'app e il sistema, utilizza Google Sans Flex per tutto il testo visualizzato sugli occhiali con display.

Per utilizzare Google Sans Flex, aggiungi la libreria glimmer-google-fonts alle dipendenze dell'app, quindi applica il carattere a livello globale a GlimmerTheme:

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