Forme in Jetpack Compose Glimmer

Dispositivi XR applicabili

Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.

Scopri di più sui tipi di dispositivi XR →

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, le superfici utilizzano le forme per definire i bordi visivi e l'arrotondamento. La classe Shapes fornisce diversi livelli di arrotondamento destinati a vari tipi di componenti.

Categorie di forme

La classe GlimmerTheme definisce tre dimensioni standard delle forme:

• Piccola: una forma con quattro angoli della stessa dimensione. Viene utilizzata per componenti come le schede. Per impostazione predefinita, si tratta di una RoundedCornerShape di 24.dp.
• Media: una forma con quattro angoli della stessa dimensione compresa tra piccola e grande. È la forma più utilizzata ed è quella predefinita utilizzata nella superficie. Per impostazione predefinita, si tratta di una RoundedCornerShape di 36.dp.
• Grande: una forma con quattro angoli completamente arrotondati. Questa forma viene utilizzata per componenti come i pulsanti. Per impostazione predefinita, si tratta di una CircleShape.

Esempio: recuperare le forme da GlimmerTheme e applicarle ai componenti

Innanzitutto, recupera le forme definite da GlimmerTheme.shapes, quindi applica quelle forme ad alcuni componenti:

@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

Personalizzare le forme

La classe Shapes è @Immutable. Puoi creare una copia delle forme del tema esistente e sostituire valori specifici utilizzando la funzione di copia. In questo modo puoi mantenere la struttura del tema e al contempo regolare raggi specifici per il brand della tua app.

Esempio: sostituire valori di forme specifici

Il seguente codice sostituisce valori di forme specifici:

@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

Valori predefiniti

Se non diversamente specificato in GlimmerTheme, il sistema utilizza i seguenti valori predefiniti: