Stili in Scrivi

L'API Style è un nuovo paradigma per personalizzare o "applicare stili" a elementi e componenti in Jetpack Compose, operazione che tradizionalmente veniva eseguita 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 il padding e i 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 stati diversi (ad es. passaggio del mouse, selezione, pressione), 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 rendimento ideali, evitando le ricomposizioni che si verificano con l'approccio animateColorAsState attuale.
  • Semplifica le API dei componenti:introducendo un unico parametro di stile 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 personalizzabile.

Concetti principali

Concetto Descrizione
Style Un'interfaccia che definisce l'aspetto di un elemento dell'interfaccia utente, con un insieme standard di proprietà modificabili. È 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'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 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" }