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 = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Najważniejsze informacje o kodzie
- Ponieważ nie określono koloru, ten tekst szuka najbliższej powierzchni, aby wybrać najlepszy 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 |
caption |
18 |
650 |
24.sp |
Używanie Google Sans Flex
Google Sans Flex to czcionka zmienna wybrana specjalnie do okularów AI , która jest dostępna w Jetpack Compose Glimmer. Zaokrąglone rogi czcionki i regulowane osie umożliwiają idealne optyczne dopasowanie rozmiaru, 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.
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) } }