Teks dalam Glimmer Jetpack Compose

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen Text memungkinkan Anda menetapkan berbagai properti teks seperti warna, ukuran font, gaya font, ketebalan font, jenis font, spasi antar-huruf, dan perataan teks.

Teks Jetpack Compose Glimmer unik karena mengelola pencocokan warna secara cerdas. Misalnya, jika tidak ada penggantian warna yang ditentukan, teks akan menggunakan warna konten default yang disediakan oleh platform terdekat.

Contoh: Membuat judul teks dalam kotak

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

Poin-poin penting tentang kode

  • Karena tidak ada warna yang ditentukan, teks ini akan mencari platform terdekat untuk memilih warna yang paling mudah dibaca (biasanya putih).

Pengaturan ukuran

Skala tipografi di Jetpack Compose Glimmer jauh lebih besar daripada Desain Material seluler standar. Gaya seperti TitleLarge dan BodyLarge keduanya adalah 30.sp, dan Teks adalah 18.sp:

Gaya Ukuran (sp) Ketebalan 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 font yang membulat dan sumbu yang dapat disesuaikan memungkinkan ukuran optik yang ideal, sehingga teks tetap mudah dilihat dan dibaca. Jika memungkinkan, untuk meningkatkan konsistensi bagi pengguna antara aplikasi dan sistem Anda, gunakan Google Sans Flex untuk semua teks yang ditampilkan di kacamata display.

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)
    }
}