Abbiamo progettato il modello per ogni elemento del database delle stanze, in modo che ogni elemento
del database delle stanze venga visualizzato in una griglia verticale pigra all'interno della nostra applicazione.
Questa funzione fungerà da modello per ogni elemento del database della stanza.
Ora creeremo un altro file chiamato Elenco note di visualizzazione.
Questo file visualizzerà gli elementi in un pigro.
Griglia verticale sfalsata che utilizza il modello creato in precedenza per ogni elemento dell'elenco.
Inizierò con Composable e con la visualizzazione dell'elenco delle note, e
questo composable prenderà in considerazione l'elenco dei parametri di tipo note.
E all'interno di questo composable useremo lazy.
Verticale.
Griglia sfalsata.
Verticale pigro.
Staggered grid è una funzione componibile di Jetpack Compose, utilizzata per creare una griglia
a scorrimento verticale in cui ogni riga può avere elementi di altezza variabile.
Questo è particolarmente utile per creare layout come i feed in stile
Pinterest, in cui i contenuti variano spesso per dimensione e forma.
Se andiamo alla dichiarazione o passiamo il mouse sulla griglia verticale pigra, una griglia sfalsata, abbiamo
le colonne, il padding del contenuto dello stato modificatore, il layout inverso, la spaziatura verticale degli
elementi, la disposizione orizzontale, il comportamento di flinch, lo scorrimento dell'utente abilitato e il contenuto.
Questi sono i parametri che ci interessano, le colonne e le colonne utilizzate.
L'opzione Celle della griglia sfalsate colonne specifica il numero di colonne della griglia ed è un parametro obbligatorio.
Il modificatore utilizzato per il layout e lo stile.
Il padding del contenuto definisce il padding intorno al contenuto e la spaziatura verticale
degli elementi definisce la spaziatura orizzontale e verticale tra gli elementi e gli elementi
generano un elenco di elementi con altezze diverse, quindi siamo interessati alle colonne.
Dobbiamo creare due colonne, ma non possiamo specificare in questo modo il numero di colonne, perché se
passiamo di nuovo il mouse, possiamo vedere che le colonne sono una griglia di celle sfalsate.
E se passiamo alle celle della griglia sfalsata, dobbiamo specificare
uno di questi tipi: fisso, adattivo o a dimensione fissa.
Impostiamo il parametro colonne di questa griglia verticale sfalsata pigra come griglia a celle
sfalsate punto fisso e impostiamo al suo interno il numero di colonne impostato.
Il modificatore qui equivale al modificatore punto di riempimento.
La dimensione massima e il padding del contenuto corrispondono ai valori di padding 16.
È un'attività che rientra nell'ambito di questa pigrizia.
Griglia verticale sfalsata.
Utilizzeremo la funzione items e useremo questo tipo di lista.
Supera i nodi, che sono l'elenco dei nodi passati come parametro, e al suo interno.
Useremo questa espressione lambda per ogni nodo.
Andate a creare un elemento dell'elenco dei nodi per esso.
E passare l'equivalente del nodo al nodo.
Discutiamo di ciò che scriviamo qui.
Items è una funzione che prende una collezione e la crea.
Un componibile per ogni elemento della collezione e i nodi sono una collezione di elementi che si desidera.
Per visualizzare nella griglia o nell'elenco.
Questo elenco di nodi viene passato come parametro per l'elenco dei nodi di visualizzazione.
Composable e all'interno dell'ambito della funzione items, abbiamo passato
un'espressione lambda per ogni elemento dell'insieme dei nodi.
La funzione lambda viene richiamata con il nodo come parametro.
Questo è il parametro e l'elemento dell'elenco dei nodi è una funzione componibile che
abbiamo creato nel video precedente e che rappresenta l'interfaccia utente di un singolo nodo.
Questa funzione prende un oggetto nodo e lo visualizza di conseguenza.
Qui dobbiamo passare il nodo e qui passiamo il parametro del nodo, quindi questa espressione lambda viene
usata per ogni elemento dell'elenco dei nodi e viene chiamato composable, che visualizza i dettagli del nodo.
Questo è il nostro elenco di nodi di visualizzazione.
Componibile.