O que fazer e o que não fazer com estilos

Nesta página, descrevemos as práticas recomendadas para trabalhar com estilos que alcançam consistência em todo o codebase, além dos princípios que seguimos ao projetar as APIs.

O que fazer

Siga estas práticas recomendadas:

Faça: use estilos para recursos visuais e modificadores para comportamentos

Use a API Styles para configuração visual (fundos, padding, bordas) e reserve modificadores para comportamentos como lógica de clique, detecção de gestos ou acessibilidade.

Fazer: expor parâmetros de estilo em sistemas de design

Para seus próprios componentes personalizados do sistema de design, exponha um objeto Style após o parâmetro do modificador.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

Fazer: substituir parâmetros visuais por um estilo

Considere substituir os parâmetros nos elementos combináveis por um único parâmetro Style. Exemplo:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

Fazer: priorizar estilos para animações

Use o bloco animate integrado para estilização baseada em estado com animações para ganhos de performance em relação aos modificadores.

Faça: aproveite o "Last-write-wins"

Aproveite o fato de que as propriedades style substituem em vez de serem empilhadas. Use isso para substituir as bordas ou planos de fundo padrão dos componentes sem precisar de vários parâmetros.

O que não fazer

Não use os seguintes padrões:

Não: use estilos para lógica de interação

Não tente processar onClick ou detecção de gestos em um estilo. Os estilos são limitados a configurações visuais com base no estado. Portanto, eles não devem processar a lógica de negócios. Em vez disso, eles só precisam ter uma aparência diferente com base no estado.

Não: forneça um estilo padrão como um parâmetro padrão.

Os parâmetros de estilo sempre precisam ser declarados usando style: Style = Style:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

Para incluir um parâmetro "padrão", mescle o estilo do parâmetro recebido com o padrão definido:

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

Não: forneça parâmetros de estilo para elementos combináveis baseados em layout

Embora seja possível fornecer um estilo a qualquer elemento combinável, não é esperado que elementos combináveis baseados em layout ou no nível da tela aceitem estilo. Não fica claro do ponto de vista do consumidor o que um estilo faria nesse nível. Os estilos são projetados para componentes, não necessariamente layouts.