WEBVTT 1 00:00.800 --> 00:09.230 Abbiamo progettato il modello per ogni elemento del database delle stanze, in modo che ogni elemento 2 00:09.230 --> 00:15.140 del database delle stanze venga visualizzato in una griglia verticale pigra all'interno della nostra applicazione. 3 00:15.140 --> 00:21.620 Questa funzione fungerà da modello per ogni elemento del database della stanza. 4 00:21.620 --> 00:28.610 Ora creeremo un altro file chiamato Elenco note di visualizzazione. 5 00:28.610 --> 00:32.990 Questo file visualizzerà gli elementi in un pigro. 6 00:33.020 --> 00:41.090 Griglia verticale sfalsata che utilizza il modello creato in precedenza per ogni elemento dell'elenco. 7 00:41.120 --> 00:50.390 Inizierò con Composable e con la visualizzazione dell'elenco delle note, e 8 00:50.390 --> 00:54.230 questo composable prenderà in considerazione l'elenco dei parametri di tipo note. 9 00:54.230 --> 00:58.220 E all'interno di questo composable useremo lazy. 10 00:58.250 --> 00:59.300 Verticale. 11 00:59.320 --> 01:01.150 Griglia sfalsata. 12 01:01.180 --> 01:02.680 Verticale pigro. 13 01:02.680 --> 01:10.600 Staggered grid è una funzione componibile di Jetpack Compose, utilizzata per creare una griglia 14 01:10.600 --> 01:15.130 a scorrimento verticale in cui ogni riga può avere elementi di altezza variabile. 15 01:15.160 --> 01:24.370 Questo è particolarmente utile per creare layout come i feed in stile 16 01:24.370 --> 01:25.900 Pinterest, in cui i contenuti variano spesso per dimensione e forma. 17 01:25.930 --> 01:32.260 Se andiamo alla dichiarazione o passiamo il mouse sulla griglia verticale pigra, una griglia sfalsata, abbiamo 18 01:32.260 --> 01:38.680 le colonne, il padding del contenuto dello stato modificatore, il layout inverso, la spaziatura verticale degli 19 01:38.710 --> 01:42.700 elementi, la disposizione orizzontale, il comportamento di flinch, lo scorrimento dell'utente abilitato e il contenuto. 20 01:42.700 --> 01:48.460 Questi sono i parametri che ci interessano, le colonne e le colonne utilizzate. 21 01:48.460 --> 01:56.320 L'opzione Celle della griglia sfalsate colonne specifica il numero di colonne della griglia ed è un parametro obbligatorio. 22 01:56.350 --> 01:59.880 Il modificatore utilizzato per il layout e lo stile. 23 01:59.880 --> 02:07.680 Il padding del contenuto definisce il padding intorno al contenuto e la spaziatura verticale 24 02:07.680 --> 02:15.600 degli elementi definisce la spaziatura orizzontale e verticale tra gli elementi e gli elementi 25 02:15.600 --> 02:18.450 generano un elenco di elementi con altezze diverse, quindi siamo interessati alle colonne. 26 02:18.450 --> 02:25.140 Dobbiamo creare due colonne, ma non possiamo specificare in questo modo il numero di colonne, perché se 27 02:25.170 --> 02:30.090 passiamo di nuovo il mouse, possiamo vedere che le colonne sono una griglia di celle sfalsate. 28 02:30.090 --> 02:38.910 E se passiamo alle celle della griglia sfalsata, dobbiamo specificare 29 02:38.910 --> 02:40.530 uno di questi tipi: fisso, adattivo o a dimensione fissa. 30 02:40.530 --> 02:49.560 Impostiamo il parametro colonne di questa griglia verticale sfalsata pigra come griglia a celle 31 02:49.560 --> 02:55.380 sfalsate punto fisso e impostiamo al suo interno il numero di colonne impostato. 32 02:55.380 --> 02:59.950 Il modificatore qui equivale al modificatore punto di riempimento. 33 02:59.980 --> 03:08.110 La dimensione massima e il padding del contenuto corrispondono ai valori di padding 16. 34 03:08.110 --> 03:11.500 È un'attività che rientra nell'ambito di questa pigrizia. 35 03:11.530 --> 03:13.000 Griglia verticale sfalsata. 36 03:13.000 --> 03:20.020 Utilizzeremo la funzione items e useremo questo tipo di lista. 37 03:20.050 --> 03:26.590 Supera i nodi, che sono l'elenco dei nodi passati come parametro, e al suo interno. 38 03:26.620 --> 03:29.830 Useremo questa espressione lambda per ogni nodo. 39 03:29.830 --> 03:33.850 Andate a creare un elemento dell'elenco dei nodi per esso. 40 03:33.880 --> 03:35.950 E passare l'equivalente del nodo al nodo. 41 03:35.950 --> 03:38.620 Discutiamo di ciò che scriviamo qui. 42 03:38.620 --> 03:42.970 Items è una funzione che prende una collezione e la crea. 43 03:43.000 --> 03:51.280 Un componibile per ogni elemento della collezione e i nodi sono una collezione di elementi che si desidera. 44 03:51.310 --> 03:53.350 Per visualizzare nella griglia o nell'elenco. 45 03:53.350 --> 03:58.930 Questo elenco di nodi viene passato come parametro per l'elenco dei nodi di visualizzazione. 46 03:58.930 --> 04:06.220 Composable e all'interno dell'ambito della funzione items, abbiamo passato 47 04:06.250 --> 04:08.800 un'espressione lambda per ogni elemento dell'insieme dei nodi. 48 04:08.800 --> 04:13.480 La funzione lambda viene richiamata con il nodo come parametro. 49 04:13.480 --> 04:20.980 Questo è il parametro e l'elemento dell'elenco dei nodi è una funzione componibile che 50 04:20.980 --> 04:24.040 abbiamo creato nel video precedente e che rappresenta l'interfaccia utente di un singolo nodo. 51 04:24.040 --> 04:29.440 Questa funzione prende un oggetto nodo e lo visualizza di conseguenza. 52 04:29.440 --> 04:38.410 Qui dobbiamo passare il nodo e qui passiamo il parametro del nodo, quindi questa espressione lambda viene 53 04:38.410 --> 04:45.730 usata per ogni elemento dell'elenco dei nodi e viene chiamato composable, che visualizza i dettagli del nodo. 54 04:45.730 --> 04:48.430 Questo è il nostro elenco di nodi di visualizzazione. 55 04:48.430 --> 04:49.540 Componibile.