WEBVTT 1 00:00.800 --> 00:04.400 Abbiamo terminato i livelli del modello e del modello della vista. 2 00:04.400 --> 00:07.040 Passiamo ora al livello di visualizzazione. 3 00:07.070 --> 00:11.570 Lo scopo di questo livello è informare il modello di vista sull'azione dell'utente. 4 00:11.600 --> 00:17.720 Questo livello osserva il modello della vista e non contiene alcun tipo di logica applicativa. 5 00:17.720 --> 00:24.620 Qui, all'interno del nostro pacchetto, creeremo un nuovo pacchetto chiamato screens all'interno di screens. 6 00:24.620 --> 00:27.050 Iniziamo a creare i Composable. 7 00:27.080 --> 00:32.630 Per prima cosa dobbiamo creare un nuovo file chiamato post item. 8 00:33.170 --> 00:38.150 Iniziare con una nuova funzione compostabile chiamata post item. 9 00:38.150 --> 00:43.010 Questa funzione prende come parametro un oggetto di tipo post. 10 00:43.010 --> 00:43.880 Al suo interno. 11 00:43.910 --> 00:50.870 Creeremo una nuova scheda compostabile e al suo interno inizieremo con una nuova colonna. 12 00:50.870 --> 00:56.540 Abbiamo due testi, uno che mostra il titolo e uno che mostra il corpo. 13 00:56.540 --> 01:02.720 Se torniamo al retrofit e al post, abbiamo ID, titolo e corpo. 14 01:02.720 --> 01:08.090 Non è necessario visualizzare l'ID, ma il titolo e il corpo. 15 01:08.120 --> 01:09.350 È molto semplice. 16 01:09.350 --> 01:19.820 Dobbiamo accedere al titolo del post e lo stile 17 01:19.850 --> 01:20.540 sarà material theme, dot typography, dot label large. 18 01:20.570 --> 01:31.190 Un altro post di testo dot body e lo stile material theme dot typography dot small text 19 01:31.190 --> 01:37.910 ok, questa colonna ha un modificatore dot padding 16 dpi e permettetemi di personalizzare questa scheda. 20 01:37.910 --> 01:41.420 È quindi necessario aggiungere l'elevazione. 21 01:41.420 --> 01:46.010 E il modificatore di elevazione è uguale alle impostazioni predefinite della carta. 22 01:46.010 --> 01:56.750 Elevazione scheda punti otto dp modificatore modificatore punti imbottitura punti 12 dp riempimento punti larghezza massima. 23 01:56.780 --> 02:03.200 Il secondo passo consiste nel creare un altro file chiamato postelenco. 24 02:03.230 --> 02:12.140 È una nuova funzione componibile che prende come parametro un elenco di post. 25 02:12.140 --> 02:14.510 All'interno di questo elenco di post. 26 02:14.510 --> 02:15.320 Ultimo componibile. 27 02:15.320 --> 02:18.140 Dobbiamo creare un colon pigro. 28 02:18.140 --> 02:26.300 E all'interno dell'ambito di questo colon pigro, utilizzerò il parametro items with 29 02:26.300 --> 02:30.200 list e passerò i post come parametro per questa funzione items. 30 02:30.200 --> 02:38.480 Qui dobbiamo impostare l'elemento post post right composable e impostare nuovamente il post su post. 31 02:38.480 --> 02:45.380 Il colon pigro è un composto che visualizza in modo efficiente un elenco di elementi a scorrimento verticale. 32 02:45.380 --> 02:54.080 Compone e dispone solo gli elementi visibili, più alcuni elementi prima e 33 02:54.080 --> 02:57.860 dopo gli elementi visibili, rendendolo efficiente per grandi insiemi di dati. 34 02:57.860 --> 03:05.060 La funzione Items viene utilizzata all'interno della colonna lazy per iterare l'elenco dei post. 35 03:05.090 --> 03:09.890 Prende un elenco e una funzione lambda per ogni elemento dell'elenco. 36 03:09.890 --> 03:14.030 Esegue una funzione lambda per ogni post. 37 03:14.030 --> 03:20.540 Nell'elenco dei post, chiama la funzione lambda, passando 38 03:20.540 --> 03:21.290 il post come argomento all'interno della funzione lambda. 39 03:21.300 --> 03:23.430 viene richiamato l'elemento post. 40 03:23.430 --> 03:30.120 L'elemento post è un altro componibile che abbiamo creato in precedenza, usato per rendere un singolo elemento post. 41 03:30.120 --> 03:33.330 Richiede un oggetto post come parametro. 42 03:33.360 --> 03:37.500 Ora dobbiamo unire l'elenco dei post con l'elemento del post. 43 03:37.500 --> 03:40.170 Per questo, creerò un nuovo file Kotlin. 44 03:40.170 --> 03:42.450 Lo chiamerò post screen. 45 03:42.450 --> 03:49.620 All'interno di questo file post screen, creerò una nuova funzione componibile, denominata post screen. 46 03:49.650 --> 04:00.360 Prendendo come parametro un ViewModel di tipo post la modalità di 47 04:00.360 --> 04:01.980 visualizzazione val posts equivale a ViewModel dot posts e post list. 48 04:02.010 --> 04:04.410 Dobbiamo passare il post qui. 49 04:04.410 --> 04:12.210 Non è necessario usare observe come stato, perché non stiamo osservando un elenco di dati in tempo reale. 50 04:12.210 --> 04:19.530 Stiamo osservando dal ViewModel una variabile chiamata posts di tipo immutabile state of. 51 04:19.530 --> 04:24.000 Quindi non abbiamo bisogno di usare l'osservatore come stato. 52 04:24.000 --> 04:28.740 Sto recuperando la proprietà posts dal modello della vista post. 53 04:28.770 --> 04:37.200 La proprietà post contiene lo stato corrente dell'oggetto elenco di post, che 54 04:37.200 --> 04:40.560 ha definito prima che la proprietà posts sia una variabile di stato. 55 04:40.560 --> 04:48.660 Se torniamo indietro, possiamo vedere che è di tipo mutable state of, quindi è una variabile di stato, il 56 04:48.660 --> 04:54.810 che significa che qualsiasi modifica a questa variabile innescherà automaticamente una ricomposizione di qualsiasi componibile che la legga. 57 04:54.810 --> 05:03.660 Questo schermo di posta è una composizione che dipende dal post, quindi qualsiasi 58 05:03.660 --> 05:07.740 modifica della variabile post innescherà una ricomposizione automatica per lo schermo di posta. 59 05:07.740 --> 05:12.000 Voglio quindi che comprendiate questa nota molto importante. 60 05:12.000 --> 05:20.550 Di nuovo ragazzi, qualsiasi modifica all'oggetto post state, attiverà una ricomposizione automatica di questa schermata 61 05:20.550 --> 05:28.200 di post, perché questa schermata di post legge i post dal ViewModel e dobbiamo passarli 62 05:28.230 --> 05:33.240 al compositore di liste di post per creare una colonna Lazycolumn e aggiornare la lista.