Ikon dalam Glimmer Jetpack Compose

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

Di Jetpack Compose Glimmer, komponen Icon dirancang khusus untuk merender ikon satu warna. Icon dapat menerima ImageVector, ImageBitmap, atau Painter sebagai sumbernya. Icon, mirip dengan Text, dapat menerapkan warna secara cerdas berdasarkan tema UI di sekitarnya. Meskipun secara default berukuran yang disediakan oleh LocalIconSize, Anda juga dapat menetapkan ukuran ikon kustom.

Contoh: Membuat kotak dengan ikon bintang besar

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

Poin penting tentang kode

  • Sumber ikon memuat drawable vektor XML lokal (R.drawable.ic_star) menggunakan painterResource, yang menunjukkan pendekatan yang direkomendasikan untuk mengintegrasikan ikon ke dalam UI Glimmer Jetpack Compose tanpa overhead library eksternal.
  • Ukuran ikon disesuaikan dengan menyetel GlimmerTheme.iconSizes.large dengan pengubah, yang menunjukkan cara mengganti ukuran yang telah ditentukan sebelumnya Jetpack Compose Glimmer.
  • Warna tint ikon disesuaikan dengan menetapkan GlimmerTheme.colors.primary menggunakan parameter tint, menerapkan tint ikon satu warna untuk konsistensi visual.