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 Formen verwendet, um die visuellen Grenzen und die Rundheit von Oberflächen zu definieren. Die Shapes Klasse bietet verschiedene Rundheitsgrade für verschiedene Arten von Komponenten.

Formkategorien

Die GlimmerTheme Klasse definiert drei Standardformgrößen:

• Klein: Eine Form mit vier gleich großen Ecken. Sie wird für Komponenten wie Karten verwendet. Standardmäßig ist dies eine RoundedCornerShape mit 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 für Oberflächen. Standardmäßig ist dies eine RoundedCornerShape mit 36.dp.
• Groß: Eine Form mit vier vollständig abgerundeten Ecken. Diese Form wird für Komponenten wie Buttons verwendet. Standardmäßig ist dies eine CircleShape.

Beispiel: Formen aus GlimmerTheme abrufen und auf Komponenten anwenden

Rufen Sie zuerst die definierten Formen aus GlimmerTheme.shapes ab und wenden Sie dann diese Formen auf einige Komponenten an:

@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

Formen anpassen

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

Beispiel: Bestimmte Formwerte überschreiben

Mit dem folgenden Code werden bestimmte Formwerte überschrieben:

@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

Standardwerte

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