Estilos no Compose

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

A API Styles melhora a flexibilidade em vários formatos, oferece melhor desempenho e facilita a criação de sistemas de design personalizados. 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 substituem os parâmetros de estilo, como padding e cores. Recomendamos fazer 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 drasticamente simplificadas e oferecem maior flexibilidade.
  • Menos recomposições, o que melhora a performance 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 de APIs mais padronizado:um conjunto padrão de propriedades estilísticas permite que qualquer componente seja 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 que podem ser estilizadas. Ele é semelhante aos estilos CSS e pode ser personalizado localmente ou usando um tema. Os estilos se sobrepõem. 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 o estado (por exemplo, isEnabled, isPressed, isChecked, estados personalizados) que você pode usar em um estilo para definir o estilo condicional.

Começar: adicionar dependências

Para usar as APIs no seu projeto, verifique se você está usando a versão Alfa mais recente da base do Jetpack Compose. No arquivo settings.gradle.kts, adicione o repositório 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.12.0-alpha03:

compose = "1.12.0-alpha03"

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" }
Avançar
Conceitos básicos de estilos