Bentuk dalam Jetpack Compose Glimmer

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, platform menggunakan bentuk untuk menentukan batas visual dan kebulatan. Class Shapes menyediakan berbagai tingkat kebulatan yang ditujukan untuk berbagai jenis komponen.

Kategori bentuk

Class GlimmerTheme menentukan tiga ukuran bentuk standar:

• Kecil: Bentuk dengan empat sudut berukuran sama. Bentuk ini digunakan untuk komponen seperti kartu. Secara default, bentuk ini adalah RoundedCornerShape 24.dp.
• Sedang: Bentuk dengan empat sudut berukuran sama yang berukuran antara kecil dan besar. Bentuk ini adalah bentuk yang paling umum digunakan dan merupakan default yang digunakan di platform. Secara default, bentuk ini adalah RoundedCornerShape 36.dp.
• Besar: Bentuk dengan empat sudut yang sepenuhnya dibulatkan. Bentuk ini digunakan untuk komponen seperti tombol. Secara default, bentuk ini adalah CircleShape.

Contoh: Mendapatkan bentuk dari GlimmerTheme dan menerapkannya ke komponen

Pertama, dapatkan bentuk yang ditentukan dari GlimmerTheme.shapes:

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

Selanjutnya, Anda dapat menerapkan bentuk ini ke beberapa komponen:

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

Menyesuaikan bentuk

Class Shapes adalah @Immutable. Anda dapat membuat salinan bentuk tema yang ada dan mengganti nilai tertentu menggunakan fungsi salin. Lakukan hal ini untuk mempertahankan struktur tema sekaligus menyesuaikan radius tertentu untuk brand aplikasi Anda.

Contoh: Mengganti nilai bentuk tertentu

Kode berikut mengganti nilai bentuk tertentu:

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

Nilai default

Jika tidak ditentukan lain dalam GlimmerTheme, sistem akan menggunakan nilai berikut secara default: