Formas no Jetpack Compose Glimmer

Dispositivos XR relevantes

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.

Saiba mais sobre tipos de dispositivos XR →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, as superfícies usam formas para definir os limites visuais e o arredondamento. A classe Shapes oferece diferentes níveis de arredondamento destinados a vários tipos de componentes.

Categorias de formas

A classe GlimmerTheme define três tamanhos de forma padrão:

• Pequena: uma forma com quatro cantos do mesmo tamanho. Ela é usada para componentes como cards. Por padrão, essa é uma RoundedCornerShape de 24.dp.
• Média: uma forma com quatro cantos do mesmo tamanho entre pequeno e grande. Essa é a forma mais usada com frequência e é o padrão usado na plataforma. Por padrão, essa é uma RoundedCornerShape de 36.dp.
• Grande: uma forma com quatro cantos totalmente arredondados. Essa forma é usada para componentes como botões. Por padrão, essa é uma CircleShape.

Exemplo: receber formas do GlimmerTheme e aplicá-las a componentes

Primeiro, receba as formas definidas 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

Em seguida, você pode aplicar essas formas a alguns componentes:

@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

Personalizar formas

A classe Shapes é @Immutable. Você pode criar uma cópia das formas de tema atuais e substituir valores específicos usando a função de cópia. Faça isso para manter a estrutura do tema enquanto ajusta raios específicos para a marca do seu app.

Exemplo: substituir valores de forma específicos

O código a seguir substitui valores de forma específicos:

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

Valores padrão

Se não for especificado de outra forma no GlimmerTheme, o sistema vai usar os seguintes valores padrão: