Che cos'è un composable

In Jetpack Compose si costruiscono le schermate scrivendo funzioni, invece di gonfiare layout XML. Una composable è semplicemente una funzione Kotlin che descrive una parte dell'interfaccia utente.

Si contrassegna una funzione di questo tipo con l'annotazione @Composable. In questo modo si informa il compilatore Compose che la funzione può emettere UI e chiamare altre funzioni composable.

Aggiungere @Composable sopra una funzione abilita le funzionalità più potenti di Compose. Al suo interno è possibile chiamare altre composable come Text o Column.

Per convenzione, i nomi delle funzioni composable iniziano con una lettera maiuscola, proprio come quelli delle classi. Questo rende le funzioni UI facili da individuare nel codice.

Una composable non restituisce un oggetto View. Invece, emette l'UI come effetto collaterale quando Compose la esegue. È sufficiente descrivere ciò che deve apparire sullo schermo.

Questo viene chiamato stile dichiarativo: si dichiara l'aspetto dell'UI per i dati correnti e Compose determina come disegnarla.

La vera potenza deriva dall'annidamento. Una composable può chiamare altre composable, consentendo di costruire schermate complesse a partire da componenti piccoli e riutilizzabili.

Qui una composable padre chiama una composable figlia. Compose le esegue dall'alto verso il basso e dispone l'UI emessa.

La maggior parte delle composable restituisce Unit, cioè non restituisce nulla di utile. Il loro compito è emettere UI, non restituire un valore.

Quindi si chiama una composable per il suo effetto sullo schermo, non per acquisire un risultato. È diverso dalle funzioni normali, ma diventa presto naturale.

Le composable possono accettare parametri, proprio come le normali funzioni Kotlin. Questo consente alla stessa composable di visualizzare dati diversi.

Qui Greeting accetta un name e lo mostra. Passare i dati rende le composable flessibili e riutilizzabili in tutta l'app.

Poiché le composable sono funzioni, è possibile chiamarle più volte con argomenti diversi. Ogni chiamata emette una propria copia dell'UI.

È così che si evita di ripetersi: si scrive l'UI una volta e la si riutilizza ovunque serva.

Le composable vengono inserite nell'activity Android usando setContent. Questo blocco è il punto di ingresso in cui Compose prende il controllo dello schermo.

All'interno di setContent si chiama la composable di primo livello e tutto ciò che emette diventa l'UI dell'app.

Quando cambiano i dati letti da una composable, Compose esegue nuovamente quella funzione per aggiornare lo schermo. Questa nuova esecuzione si chiama ricomposizione.

Non è necessario aggiornare manualmente l'UI. Si modificano i dati e Compose ricompone automaticamente le composable interessate. In questo modo lo schermo resta sincronizzato con lo stato.

Una buona abitudine consiste nel fare in modo che ogni composable svolga un compito chiaro. Le composable piccole e focalizzate sono più facili da leggere, testare e riutilizzare.

Se una funzione diventa troppo grande, la si suddivide in composable più piccole e le si chiama insieme. Il suo futuro sé la ringrazierà.

Le composable provengono dalle librerie Compose. Spesso si importa androidx.compose.runtime.Composable per l'annotazione e androidx.compose.material3.Text per il testo.

Android Studio aggiunge solitamente questi import per Lei. Sapere da dove provengono è utile quando manca un import.

Ripassiamo che cosa rende una funzione una composable.

Ha imparato che una composable è una funzione Kotlin contrassegnata con @Composable che descrive l'UI in modo dichiarativo. Le composable possono accettare parametri, chiamare altre composable e hanno nomi con l'iniziale maiuscola.

Restituiscono Unit ed emettono UI invece di restituire un valore. Quando i dati cambiano, Compose le ricompone per aggiornare lo schermo. Nella prossima lezione visualizzerà testo reale e disporrà le viste in pila con Column.