Estilos no Compose

A API Style é um novo paradigma para personalizar ou "estilizar" elementos e componentes no Jetpack Compose, o que tradicionalmente era feito usando modificadores. Ela foi projetada para permitir uma personalização mais fácil e profunda.

A API Styles melhora a flexibilidade em todos os formatos, oferece melhor desempenho e permite a criação de sistemas de design personalizados mais fáceis. Mesmo que você não precise de componentes personalizados, a API Styles tem muitos benefícios para seu sistema de design.

Uma distinção importante é que os estilos não substituem os modificadores, mas atuam como substitutos de parâmetros de estilo, como preenchimento e cores. Recomendamos a transição para o uso de estilos em vez de parâmetros para aumentar a flexibilidade e o desempenho.

Benefícios dos estilos

  • Simplifica a estilização baseada em estado:a API oferece uma maneira mais concisa e declarativa de definir estilos que mudam com base em diferentes estados (por exemplo, ao passar o cursor, focar, pressionar), reduzindo significativamente o código boilerplate em comparação com o sistema de modificadores.
  • Melhora as transições de estado animadas:a API Style permite a animação integrada de propriedades de estilo entre estados com características de desempenho ideais, evitando recomposições que ocorrem com a abordagem animateColorAsState atual.
  • Simplifica as APIs de componentes:ao introduzir um único parâmetro de estilo para personalização, as APIs de componentes são simplificadas drasticamente e oferecem maior flexibilidade.
  • Menos recomposições que levam a um melhor desempenho em relação aos modificadores:os estilos são executados nas fases de desenho e layout do Compose, ignorando a fase de composição.
  • Conjunto mais padronizado de APIs:um conjunto padrão de propriedades estilísticas torna qualquer componente estilizado.

Principais conceitos

Conceito Descrição
Style Uma interface que define a aparência de um elemento da interface, com um conjunto padrão de propriedades estilizadas. É semelhante aos estilos CSS e pode ser personalizado localmente ou por um tema. Os estilos se substituem. Definir uma propriedade duas vezes (por exemplo, background()) resulta em um único valor final.
StyleScope Um escopo de receptor para a função applyStyle() em um estilo. Ele fornece funções para definir propriedades visuais (preenchimento, plano de fundo, borda etc.) e acessar o StyleState atual.
StyleState Fornece um estado (por exemplo, isEnabled, isPressed, isChecked, estados personalizados) que você pode usar em um estilo para definir a estilização condicional.

Introdução: adicionar dependências

Para usar as APIs no seu projeto, use a versão Alfa mais recente da base do Jetpack Compose. No arquivo settings.gradle.kts, adicione o repositório do Maven de snapshot à lista de repositórios a serem usados.

No arquivo libs.versions.toml ou diretamente no arquivo app/build.gradle.kts, defina a versão do Compose como 1.11.0-alpha06:

compose = "1.11.0-alpha06"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }