Jetpack Compose Glimmer'da şekiller

Uygun XR cihazlar

Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.

XR cihaz türleri hakkında bilgi edinin →

XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da yüzeyler, görsel sınırlarını ve yuvarlaklığını tanımlamak için şekilleri kullanır. Shapes sınıfı, çeşitli bileşen türleri için farklı yuvarlaklık düzeyleri sağlar.

Şekil kategorileri

GlimmerTheme sınıfı üç standart şekil boyutu tanımlar:

• Küçük: Dört köşesi de aynı boyutta olan bir şekil. Kartlar gibi bileşenler için kullanılır. Varsayılan olarak bu değer 24.dp'nin RoundedCornerShape'sıdır.
• Orta: Küçük ve büyük boyut arasında, aynı boyutta dört köşesi olan bir şekil. Bu, en çok tercih edilen şekildir ve yüzeyde varsayılan olarak kullanılır. Varsayılan olarak bu, 36.dp'lik bir RoundedCornerShape'dir.
• Büyük: Dört köşesi tamamen yuvarlatılmış bir şekil. Bu şekil, düğmeler gibi bileşenler için kullanılır. Varsayılan olarak bu değer CircleShape'dır.

Örnek: GlimmerTheme'den şekil alma ve bunları bileşenlere uygulama

Öncelikle GlimmerTheme.shapes adresinden tanımlı şekilleri alın ve ardından bu şekilleri bazı bileşenlere uygulayın:

@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

Şekilleri özelleştirme

Shapes sınıfı @Immutable. Mevcut tema şekillerinin bir kopyasını oluşturabilir ve kopyalama işlevini kullanarak belirli değerleri geçersiz kılabilirsiniz. Uygulamanızın markası için belirli yarıçapları ayarlarken temanın yapısını korumak için bu işlemi yapın.

Örnek: Belirli şekil değerlerini geçersiz kılma

Aşağıdaki kod, belirli şekil değerlerini geçersiz kılar:

@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

Varsayılan değerler

GlimmerTheme içinde aksi belirtilmediği sürece sistem, varsayılan olarak aşağıdaki değerleri kullanır: