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 tingkat kebulatan yang berbeda 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, lalu terapkan bentuk tersebut ke beberapa komponen:

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

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, 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:

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}
ShapesSamples.kt

Nilai default

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