Stili in Scrivi

L'API Style è un nuovo paradigma per personalizzare o "applicare stili" a elementi e componenti in Jetpack Compose, che tradizionalmente veniva eseguito tramite modificatori. È progettata 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.

È importante distinguere che gli stili non sostituiscono i modificatori, ma sostituiscono i parametri di stile, come padding e colori. Ti consigliamo di passare all'utilizzo degli stili rispetto ai parametri per una maggiore flessibilità e prestazioni.

Vantaggi degli stili

  • Semplifica l'applicazione di stili basati sullo stato: l'API fornisce un modo più conciso e dichiarativo per definire gli stili che cambiano in base a stati diversi (ad es. al passaggio del mouse, con lo stato attivo, premuto), riducendo significativamente 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 corrente.
  • 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 che portano a prestazioni migliori 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 stilizzabile.

Concetti principali

Concetto Descrizione
Style Un'interfaccia che definisce l'aspetto di un elemento dell'UI, con un set standard di proprietà stilizzabili. È simile agli stili CSS e può essere personalizzata localmente o tramite un tema. Gli stili si sovrascrivono a vicenda; l'impostazione di una proprietà due volte (ad es. background()) genera un singolo valore finale.
StyleScope Un ambito di ricezione 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'attuale StyleState.
StyleState Fornisce uno stato (ad es. isEnabled, isPressed, isChecked, stati personalizzati) che puoi utilizzare all'interno di uno stile per definire l'applicazione di stili condizionali.

Inizia: aggiungi dipendenze

Per utilizzare le API nel tuo progetto, assicurati di utilizzare l'ultima release alpha di Jetpack Compose Foundation. Nel file settings.gradle.kts, aggiungi il repository Maven dello 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.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" }