Formes dans Jetpack Compose Glimmer

Appareils XR concernés

Ce guide vous aide à 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 forme standards :

• Petite : forme avec quatre angles de même taille. Elle est utilisée pour des composants tels que les 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 les 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 :

@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

Vous pouvez ensuite appliquer ces formes à certains composants :

@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

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 :

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

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 :