Formen in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.

Informationen zu XR-Gerätetypen →

Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer werden Oberflächen mit Formen definiert, um ihre visuellen Grenzen und Rundungen festzulegen. Die Klasse Shapes bietet verschiedene Rundungsgrade für unterschiedliche Arten von Komponenten.

Formkategorien

In der Klasse GlimmerTheme sind drei Standardgrößen für Formen definiert:

• Klein: Eine Form mit vier gleich großen Ecken. Sie wird für Komponenten wie Karten verwendet. Standardmäßig ist dies ein RoundedCornerShape von 24.dp.
• Mittel: Eine Form mit vier gleich großen Ecken, deren Größe zwischen „Klein“ und „Groß“ liegt. Dies ist die am häufigsten verwendete Form und die Standardform in der Benutzeroberfläche. Standardmäßig ist dies ein RoundedCornerShape von 36.dp.
• Groß: Eine Form mit vier vollständig abgerundeten Ecken. Diese Form wird für Komponenten wie Schaltflächen verwendet. Standardmäßig ist dies ein CircleShape.

Beispiel: Formen aus GlimmerTheme abrufen und auf Komponenten anwenden

Rufen Sie zuerst die definierten Formen aus GlimmerTheme.shapes ab:

@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

Als Nächstes können Sie diese Formen auf einige Komponenten anwenden:

@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

Formen anpassen

Die Klasse Shapes ist @Immutable. Sie können eine Kopie der vorhandenen Formen des Designs erstellen und bestimmte Werte mit der Kopierfunktion überschreiben. So können Sie die Struktur des Designs beibehalten und gleichzeitig bestimmte Radien an das Branding Ihrer App anpassen.

Beispiel: Bestimmte Formwerte überschreiben

Mit dem folgenden Code werden bestimmte Formwerte überschrieben:

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

Standardwerte

Sofern in der GlimmerTheme nichts anderes angegeben ist, verwendet das System standardmäßig die folgenden Werte: