Fondamenti di Text e Column

La cosa più semplice da mostrare in Compose è il testo. La composable Text disegna una stringa sullo schermo.

Si passa la stringa da visualizzare come primo argomento. È tutto ciò che serve per mostrare delle parole sullo schermo.

Text accetta parametri per modificarne l'aspetto. È possibile impostare fontSize, color e fontWeight.

Le dimensioni usano l'unità sp, che si adatta alle impostazioni dei caratteri dell'utente. In questo modo l'app resta leggibile per tutti.

Se si chiama Text due volte di seguito, entrambi i testi finiscono nello stesso punto, sovrapposti. Le composable non si dispongono automaticamente.

Per disporre gli elementi in ordine, serve una composable di layout che organizzi i figli. La più comune per la disposizione verticale è Column.

Column dispone i figli verticalmente, uno sotto l'altro. Le composable figlie vengono inserite nel relativo blocco lambda finale.

Ogni composable scritta tra le parentesi graffe diventa una riga della pila verticale, nell'ordine in cui viene scritta.

All'interno di una Column, i figli compaiono dall'alto verso il basso esattamente nell'ordine in cui vengono elencati. Se si sposta una riga verso l'alto nel codice, si sposta verso l'alto anche sullo schermo.

Questo rende i layout prevedibili: leggendo il codice dall'alto verso il basso, si sa come apparirà lo schermo nello stesso ordine.

Column può controllare la spaziatura tra i figli usando verticalArrangement. Ad esempio, Arrangement.spacedBy aggiunge spazi uniformi.

È più pulito che aggiungere manualmente la spaziatura a ogni figlio e mantiene coerente il layout.

Per impostazione predefinita, una Column allinea i figli all'inizio, cioè a sinistra. Usi horizontalAlignment per centrarli o allinearli alla fine.

Impostandolo su Alignment.CenterHorizontally, ogni figlio viene centrato all'interno della larghezza della colonna.

Column dispone gli elementi in verticale; il suo elemento fratello Row dispone gli elementi affiancati, in orizzontale. Il concetto è lo stesso, ma la direzione è diversa.

Combinerà Row e Column per creare griglie e schede. Per ora ricordi: Column dispone verso il basso, Row trasversalmente.

I layout possono contenere altri layout. Può inserire una Row dentro una Column per creare strutture più articolate.

In questo esempio una colonna mostra un titolo, seguito da una riga con due parti di testo. L'annidamento permette di costruire schermate complesse a partire da elementi semplici.

Per aggiungere uno spazio fisso tra due composable, può inserire uno Spacer. È un composable vuoto che occupa semplicemente dello spazio.

Gli assegni un'altezza tramite un modifier: in questo modo spingerà verso il basso l'elemento successivo. Approfondiremo i modifier nella prossima lezione.

Con Text e Column può già costruire una semplice schermata con etichette. Disponga in pila un'intestazione e un paio di righe di dettagli.

Questo piccolo schema è alla base di quasi tutte le schermate Compose che scriverà.

Ha imparato a visualizzare stringhe con Text e a definirne lo stile usando fontSize e fontWeight. Una Column dispone gli elementi figli verticalmente, nell'ordine del codice, mentre una Row li dispone orizzontalmente.

Può controllare la spaziatura con verticalArrangement o con uno Spacer e allineare gli elementi figli con horizontalAlignment. Annidare Row e Column consente di creare layout più articolati. Nella prossima lezione visualizzerà l'anteprima di queste schermate senza eseguire l'app.