Chip judul di Glimmer Jetpack Compose

Perangkat XR yang kompatibel

Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.

Mempelajari jenis perangkat XR →

Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen TitleChip dirancang untuk memberikan label singkat dan non-interaktif untuk konten terkait, seperti Kartu. Gunakan chip judul untuk menampilkan informasi ringkas seperti judul singkat, nama, atau status. Karena chip judul tidak dapat difokuskan atau interaktif, chip ini berperan murni informatif dalam UI Jetpack Compose Glimmer. Misalnya, Anda dapat memberikan chip judul berlabel "Bahan" di samping daftar bahan yang dapat di-scroll.

Contoh dasar: Menampilkan chip judul singkat

Anda dapat membuat chip judul pendek dengan sedikit kode:

TitleChip { Text("Messages") }

Contoh mendetail: Menampilkan chip judul dengan kartu

Untuk menggunakan chip judul dengan komponen lain, tempatkan chip judul TitleChipDefaults.AssociatedContentSpacing di atas komponen lain dalam composable. Kode berikut menunjukkan cara menggunakan chip judul dengan kartu:

@Composable
fun TitleChipExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Poin penting tentang kode

• Spacer memiliki tinggi tetap untuk memberikan jarak vertikal yang benar, yang ditentukan oleh TitleChipDefaults.AssociatedContentSpacing, di antara kedua komponen.