Di Jetpack Compose Glimmer, komponen Text memungkinkan Anda menetapkan berbagai properti teks seperti warna, ukuran font, gaya font, ketebalan font, jenis font, jarak antar-huruf, dan perataan teks.
Teks Berkilau Jetpack Compose unik karena secara cerdas mengelola pencocokan warna. Misalnya, jika tidak ada penggantian warna yang ditentukan, teks akan menggunakan warna konten default yang disediakan oleh platform terdekat tempat teks berada.
Contoh: Membuat judul teks dalam kotak
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Poin penting tentang kode
- Karena tidak ada warna yang ditentukan, teks ini akan melihat permukaan terdekat untuk memilih warna yang paling mudah dibaca (biasanya putih).
Pengaturan ukuran
Skala tipografi dalam Jetpack Compose Glimmer jauh lebih besar daripada Desain Material seluler standar. Gaya seperti TitleLarge dan BodyLarge keduanya
30.sp, dan Teksnya adalah 18.sp:
| Gaya | Ukuran (sp) | Berat | Tinggi Baris |
|---|---|---|---|
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 |
teks |
18 |
650 |
24.sp |
Menggunakan Google Sans Flex
Google Sans Flex adalah font variabel yang dipilih secara khusus untuk kacamata AI yang disediakan sebagai bagian dari Jetpack Compose Glimmer. Sudut membulat dan sumbu yang dapat disesuaikan pada font memungkinkan ukuran optik yang ideal, sehingga memastikan teks tetap dapat dilihat sekilas dan terbaca. Jika memungkinkan, untuk meningkatkan konsistensi bagi pengguna antara aplikasi dan sistem Anda, gunakan Google Sans Flex untuk semua teks yang ditampilkan di kacamata tampilan.
Untuk menggunakan Google Sans Flex, tambahkan library glimmer-google-fonts ke
dependensi aplikasi Anda, lalu terapkan font secara global ke GlimmerTheme:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }