In Jetpack Compose Glimmer, il componente Text ti consente di impostare varie proprietà del testo, come colore, dimensione, stile, spessore e famiglia del carattere, oltre alla spaziatura tra le lettere e all'allineamento del testo.
Il testo Glimmer di Jetpack Compose è unico 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 = "This is a sample heading",
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 (di solito il bianco).
Taglie
La scala tipografica in Jetpack Compose Glimmer è molto più grande
del Material Design mobile standard. 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 AI e fornito come parte di Jetpack Compose Glimmer. Gli angoli arrotondati e gli assi regolabili del carattere consentono un dimensionamento ottico ideale, 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 della tua app, quindi applica il carattere globalmente a GlimmerTheme:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }