WEBVTT 1 00:00.770 --> 00:04.190 Voci Nav per ogni indice. 2 00:04.220 --> 00:12.980 È una funzione di ordine superiore di Kotlin che itera su un insieme 3 00:12.980 --> 00:16.580 di elementi della nav e fornisce sia l'indice che l'elemento in ogni iterazione. 4 00:16.610 --> 00:24.170 È utile quando si devono eseguire operazioni che dipendono sia 5 00:24.170 --> 00:25.850 dalla posizione che dal valore di ciascun elemento dell'insieme. 6 00:25.880 --> 00:30.680 Nav items è l'insieme su cui si sta iterando. 7 00:30.680 --> 00:38.960 Può essere un elenco, una matrice o qualsiasi altro insieme iterabile e in 8 00:38.960 --> 00:40.520 questo caso si tratta di un elenco di oggetti item per ogni indice. 9 00:40.520 --> 00:47.120 Questa è la funzione che itera sull'insieme, fornendo 10 00:47.120 --> 00:48.020 sia l'indice che l'elemento per ogni elemento. 11 00:48.020 --> 00:52.220 Indice la posizione dell'elemento corrente nell'insieme. 12 00:52.220 --> 00:57.380 L'elemento è l'elemento corrente della collezione. 13 00:57.380 --> 01:00.530 Ecco quindi un elenco di elementi. 14 01:00.530 --> 01:08.680 E vogliamo creare una barra di navigazione inferiore in cui 15 01:08.680 --> 01:09.220 ogni elemento è rappresentato da una voce di navigazione inferiore. 16 01:09.220 --> 01:19.270 Quindi creiamo un elemento di navigazione inferiore per ogni elemento dell'elenco di elementi di navigazione. 17 01:19.270 --> 01:22.150 Abbiamo quindi tre voci: profilo della casa e impostazioni. 18 01:22.150 --> 01:26.830 Dobbiamo creare un elemento per ciascuno di questi elementi. 19 01:26.830 --> 01:36.940 Nella barra di navigazione dell'elenco, abbiamo il parametro selected e onClick e l'icona. 20 01:36.940 --> 01:39.610 Cominciamo con l'elemento della barra di navigazione. 21 01:39.610 --> 01:47.740 L'elemento della barra di navigazione è una funzione componibile fornita da 22 01:47.740 --> 01:49.600 Jetpack Compose che rappresenta un elemento della barra di navigazione inferiore. 23 01:49.600 --> 01:57.100 Questa funzione viene utilizzata all'interno della barra di navigazione, precedentemente chiamata 24 01:57.100 --> 02:00.190 navigazione inferiore, per creare singoli elementi che gli utenti possono selezionare. 25 02:00.190 --> 02:01.750 Abbiamo un'icona. 26 02:01.750 --> 02:11.080 Abbiamo selezionato l'etichetta e facciamo clic sull'icona per visualizzare l'icona per questo 27 02:11.110 --> 02:13.930 elemento e sull'etichetta per visualizzare l'etichetta di testo per questo elemento selezionato. 28 02:13.960 --> 02:18.190 Un booleano che indica se questo elemento è attualmente selezionato o meno. 29 02:18.220 --> 02:22.930 onClick Un callback da invocare quando si fa clic sull'elemento. 30 02:22.960 --> 02:30.190 Inoltre, abbiamo molti altri parametri come il modificatore che mostra 31 02:30.190 --> 02:30.940 sempre l'etichetta, i colori, l'interazione, la fonte e altri. 32 02:30.970 --> 02:33.280 È l'elemento della barra di navigazione. 33 02:33.310 --> 02:38.320 Il primo parametro sarà l'elemento selezionato. 34 02:38.320 --> 02:42.130 Se è uguale all'indice, al momento del clic. 35 02:42.130 --> 02:47.170 Iniziamo con l'elemento selezionato onclick uguale a index. 36 02:47.200 --> 02:48.580 Questo è il primo passo. 37 02:48.580 --> 02:52.720 Impostazione della voce selezionata sul controller navale indice. 38 02:52.720 --> 02:58.990 È necessario sincronizzare il controller di navigazione con la navigazione in basso. 39 02:58.990 --> 03:02.050 Per questo è necessario utilizzare la navigazione. 40 03:02.050 --> 03:06.370 Quando l'utente fa clic su un elemento, dobbiamo ottenere il percorso. 41 03:06.370 --> 03:16.200 È inoltre necessario utilizzare il controller della navigazione punto grafico punto di partenza percorso di destinazione punto sinistro. 42 03:22.440 --> 03:24.240 Punto di controllo della navigazione. 43 03:24.240 --> 03:26.010 Navigare qui. 44 03:26.010 --> 03:32.370 Avvia la navigazione verso la destinazione specificata definita dal percorso dell'elemento. 45 03:32.400 --> 03:34.200 Le opzioni di navigazione. 46 03:34.200 --> 03:40.890 Questo blocco consente di specificare ulteriori opzioni e comportamenti di navigazione. 47 03:40.890 --> 03:42.480 Il controllore di navigazione. 48 03:42.720 --> 03:43.800 Inizio del punto grafico. 49 03:43.800 --> 03:45.480 Punto del percorso di destinazione. 50 03:45.480 --> 03:51.960 Controlla se il percorso di destinazione iniziale del grafo di navigazione non è nullo. 51 03:51.960 --> 04:00.120 Se non è nullo, esegue il codice all'interno del blocco let, con il 52 04:00.120 --> 04:04.080 percorso che è il percorso di partenza e il pop-up del percorso. 53 04:04.080 --> 04:09.570 Questa opzione apre il Backstack fino alla rotta specificata. 54 04:09.600 --> 04:14.580 In genere, la destinazione di avvio e lo stato di salvataggio sono uguali a true. 55 04:14.670 --> 04:21.980 Salva lo stato delle destinazioni artistiche, consentendo di ripristinare il 56 04:21.980 --> 04:23.810 loro stato se l'utente vi ritorna in un secondo momento. 57 04:23.810 --> 04:31.490 È necessario utilizzare il lancio del singolo tocco uguale a true e il ripristino dello stato uguale a true. 58 04:31.520 --> 04:33.470 Avvio con un solo tocco. 59 04:33.470 --> 04:40.250 Questo assicura che se la destinazione si trova già in cima 60 04:40.250 --> 04:42.350 al backstack, non venga creata una nuova istanza della destinazione. 61 04:42.350 --> 04:49.190 Invece, l'istanza esistente viene riutilizzata, evitando che 62 04:49.190 --> 04:49.880 vengano create più istanze della stessa destinazione. 63 04:49.880 --> 04:51.290 Ripristinare lo stato. 64 04:51.290 --> 04:57.920 Ripristina lo stato di salvataggio della destinazione, se è stato salvato in precedenza. 65 04:57.920 --> 05:02.690 Ad esempio, se è stato aperto con lo stato di salvataggio uguale a true. 66 05:02.720 --> 05:07.070 Ricordare il pop-up per avviare il singolo tocco e ripristinare lo stato. 67 05:07.070 --> 05:09.200 Queste sono le opzioni di navigazione. 68 05:09.200 --> 05:13.430 Quindi il pop up due fa saltare il backstack fino all'inizio. 69 05:13.430 --> 05:20.300 Il salvataggio della destinazione e il lancio con un solo tocco impediscono la duplicazione delle istanze della 70 05:20.300 --> 05:25.190 destinazione e il ripristino dello stato ripristina lo stato se la destinazione è stata precedentemente salvata. 71 05:25.190 --> 05:31.820 Questa configurazione di navigazione consente una navigazione efficiente e piena di stati con 72 05:31.820 --> 05:37.580 l'applicazione Jetpack Compose, garantendo la conservazione dello stato ed evitando duplicazioni nella destinazione. 73 05:37.580 --> 05:46.190 Utilizzando queste opzioni di navigazione, si migliora l'esperienza dell'utente 74 05:46.190 --> 05:46.910 con un comportamento di navigazione fluido e coerente. 75 05:46.940 --> 05:57.200 Ora specifichiamo l'icona e usiamo l'icona item dot icon e la descrizione del contenuto item dot title. 76 05:57.230 --> 06:00.440 Sostituire il pittore con un vettore o un'immagine vettoriale. 77 06:00.440 --> 06:09.410 Poiché si tratta di un vettore e non di un'immagine, è necessario utilizzare un altro parametro, ovvero l'etichetta. 78 06:09.440 --> 06:14.510 L'etichetta corrisponde al titolo del punto dell'elemento di testo. 79 06:14.540 --> 06:19.760 Ok, ecco come implementare la barra di navigazione nella nostra applicazione.