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.
Görüntüleme Gözlüğü

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 1. Jetpack Compose Glimmer'da büyük, orta ve küçük şekil örnekleri.

Ş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'lik bir RoundedCornerShape'dir.
  • Orta: Küçük ve büyük arasında bir boyuta sahip, dört köşesi aynı boyutta olan bir şekil. Bu, en çok tercih edilen şekildir ve yüzeyde varsayılan olarak kullanılır. Varsayılan olarak bu, RoundedCornerShape 36.dp'dir.
  • Büyük: Dört köşesi tamamen yuvarlak olan bir şekil. Bu şekil, düğmeler gibi bileşenler için kullanılır. Bu, varsayılan olarak CircleShape'dır.

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

Öncelikle, tanımlanmış şekilleri GlimmerTheme.shapes adresinden alı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) }
    }
}

Ardından, bu şekilleri bazı bileşenlere uygulayabilirsiniz:

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

Ş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:

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

Varsayılan değerler

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

Jeton Varsayılan şekil Boyut veya yarıçap

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

Tamamen Yuvarlatılmış