Stili in Scrivi

L'API Style è un nuovo paradigma per la personalizzazione o lo "stile" di elementi e componenti in Jetpack Compose, che tradizionalmente è stato eseguito tramite modificatori. È progettato per consentire una personalizzazione più approfondita e semplice.

L'API Styles migliora la flessibilità tra i fattori di forma, offre prestazioni migliori e consente di creare più facilmente sistemi di progettazione personalizzati. Anche se non hai bisogno di componenti personalizzati, l'API Styles offre molti vantaggi per il tuo sistema di progettazione.

Una distinzione importante è che gli stili non sostituiscono i modificatori, ma sostituiscono i parametri di stile, come spaziatura interna e colori. Ti consigliamo di passare all'utilizzo degli stili anziché dei parametri per una maggiore flessibilità e prestazioni migliori.

Vantaggi degli stili

  • Semplifica lo stile basato sullo stato:l'API fornisce un modo più conciso e dichiarativo per definire gli stili che cambiano in base a diversi stati (ad es. passaggio del mouse, stato attivo, pressione), riducendo in modo significativo il codice boilerplate rispetto al sistema di modificatori.
  • Migliora le transizioni di stato animate:l'API Style consente l'animazione integrata delle proprietà di stile tra gli stati con caratteristiche di prestazioni ideali, evitando le ricomposizioni che si verificano con l'approccio animateColorAsState attuale.
  • Semplifica le API dei componenti:introducendo un singolo parametro Style per la personalizzazione, le API dei componenti vengono notevolmente semplificate e offrono una maggiore flessibilità.
  • Meno ricomposizioni, con un conseguente miglioramento delle prestazioni rispetto ai modificatori: gli stili vengono eseguiti nelle fasi di disegno e layout di Compose, saltando la fase di composizione.
  • Set di API più standardizzato:un set standard di proprietà stilistiche rende qualsiasi componente personalizzabile.

Concetti principali

Concetto Descrizione
Style Un'interfaccia che definisce l'aspetto di un elemento UI, con un set di standard di proprietà personalizzabili. È simile agli stili CSS e può essere personalizzato localmente o tramite un tema. Gli stili si sovrascrivono a vicenda; l'impostazione di una proprietà due volte (ad es. background()) genera un unico valore finale.
StyleScope Un ambito del ricevitore per la funzione applyStyle() all'interno di uno stile. Fornisce funzioni per definire le proprietà visive (spaziatura interna, sfondo, bordo e così via) e accedere all'oggetto StyleState corrente.
StyleState Fornisce lo stato (ad es. isEnabled, isPressed, isChecked, stati personalizzati) che puoi utilizzare all'interno di uno stile per definire lo stile condizionale.

Inizia: aggiungi le dipendenze

Per utilizzare le API nel tuo progetto, assicurati di utilizzare l'ultima versione alpha di Jetpack Compose Foundation. Nel file settings.gradle.kts, aggiungi il repository Maven di snapshot all'elenco dei repository da utilizzare.

Nel file libs.versions.toml o direttamente nel file app/build.gradle.kts, imposta la versione di Compose su 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" }
Avanti
Concetti fondamentali degli stili