Formes dans Jetpack Compose Glimmer

Appareils XR concernés

Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.

En savoir plus sur les types d'appareils XR →

En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, les surfaces utilisent des formes pour définir leurs limites visuelles et leur arrondi. La classe Shapes fournit différents niveaux d' arrondi destinés à différents types de composants.

Catégories de formes

La classe GlimmerTheme définit trois tailles de formes standards :

• Petite : forme avec quatre angles de même taille. Elle est utilisée pour des composants tels que des cartes. Par défaut, il s'agit d'une RoundedCornerShape de 24 dp.
• Moyenne : forme avec quatre angles de même taille, entre petite et grande. Il s'agit de la forme la plus couramment utilisée, et de celle par défaut dans la surface. Par défaut, il s'agit d'une RoundedCornerShape de 36 dp.
• Grande : forme avec quatre angles entièrement arrondis. Cette forme est utilisée pour des composants tels que des boutons. Par défaut, il s'agit d'une CircleShape.

Exemple : Obtenir des formes à partir de GlimmerTheme et les appliquer à des composants

Commencez par obtenir les formes définies à partir de GlimmerTheme.shapes, puis appliquez ces formes à certains composants :

@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

Personnaliser les formes

La classe Shapes est @Immutable. Vous pouvez créer une copie des formes de thème existantes et remplacer des valeurs spécifiques à l'aide de la fonction de copie. Procédez ainsi pour conserver la structure du thème tout en ajustant des rayons spécifiques pour la marque de votre application.

Exemple : Remplacer des valeurs de forme spécifiques

Le code suivant remplace des valeurs de forme spécifiques :

@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

Valeurs par défaut

Si aucune autre valeur n'est spécifiée dans GlimmerTheme, le système utilise les valeurs par défaut suivantes :