A API Style é um novo paradigma para personalizar ou "estilizar" elementos e componentes no Jetpack Compose, o que tradicionalmente era feito com modificadores. Ele foi projetado para permitir uma personalização mais fácil e completa.
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 atuam como substitutos para parâmetros de estilização, 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 com base no estado:a API oferece uma maneira mais concisa e declarativa de definir estilos que mudam com base em diferentes estados (por exemplo, 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 atual do
animateColorAsState. - Simplifica as APIs de componentes:ao introduzir um único parâmetro de estilo para personalização, as APIs de componentes são muito simplificadas e oferecem mais flexibilidade.
- Menos recomposições, o que leva a uma performance melhor em relação aos modificadores:os estilos são executados nas fases de desenho e layout do Compose, pulando a fase de composição.
- Conjunto mais padronizado de APIs:um conjunto padrão de propriedades estilísticas permite estilizar qualquer componente.
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 (padding, plano de fundo, borda etc.) e acessar o StyleState atual. |
StyleState |
Fornece estados (por exemplo, isEnabled, isPressed, isChecked, estados personalizados) que podem ser usados em um estilo para definir a estilização condicional. |
Começar: adicionar dependências
Para usar as APIs no seu próprio projeto, verifique se você está usando a versão alfa mais recente
do Jetpack Compose Foundation. 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.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" }