W Jetpack Compose Glimmer komponent Text umożliwia ustawianie różnych właściwości tekstu
, takich jak kolor, rozmiar czcionki, styl czcionki, grubość czcionki, rodzina czcionek, odstępy między literami
i wyrównanie tekstu.
Tekst w Jetpack Compose Glimmer jest wyjątkowy, ponieważ inteligentnie zarządza dopasowywaniem kolorów. Jeśli na przykład nie określono zastąpienia koloru, tekst domyślnie przyjmuje kolor treści podany przez najbliższą powierzchnię, na której się znajduje.
Przykład: tworzenie nagłówka tekstowego w ramce
@Composable fun TextSample() { Text( text = "Hello Glimmer", style = GlimmerTheme.typography.titleLarge ) }
Najważniejsze informacje o kodzie
- Ponieważ nie określono koloru, ten tekst szuka najbliższej powierzchni, aby wybrać najlepiej czytelny kolor (zwykle biały).
Dobieranie rozmiaru
Skala typografii w Jetpack Compose Glimmer jest znacznie większa niż w standardowym Material Design na urządzeniach mobilnych. Style takie jak TitleLarge i BodyLarge mają rozmiar 30.sp, a podpis ma rozmiar 18.sp:
| Styl | Rozmiar (sp) | Grubość | Wysokość wiersza |
|---|---|---|---|
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 |
podpis |
18 |
650 |
24.sp |
Używanie Google Sans Flex
Google Sans Flex to czcionka zmienna wybrana specjalnie do okularów z AI , która jest dostępna w ramach Jetpack Compose Glimmer. Zaokrąglone rogi czcionki i regulowane osie umożliwiają idealne dopasowanie optyczne, dzięki czemu tekst pozostaje czytelny. Jeśli to możliwe, aby zapewnić użytkownikom spójność między aplikacją a systemem, używaj Google Sans Flex we wszystkich tekstach wyświetlanych na okularach z wyświetlaczem.
Aby używać Google Sans Flex, dodaj bibliotekę glimmer-google-fonts do zależności aplikacji, a następnie zastosuj czcionkę globalnie do GlimmerTheme:
@Composable
fun GoogleSansFlexTypographySample() {
val typography = createGoogleSansFlexTypography()
GlimmerTheme(typography = typography) {
Text("Hello World", style = GlimmerTheme.typography.titleLarge)
}
}