WEBVTT 1 00:00.860 --> 00:03.590 Salve sviluppatori e bentornati. 2 00:03.590 --> 00:10.640 Nei video precedenti avete imparato a conoscere i diversi elementi di compose e 3 00:10.640 --> 00:14.870 a raggrupparli e posizionarli all'interno dei layout per creare interfacce utente complesse. 4 00:14.870 --> 00:21.050 Utilizzando queste conoscenze, è possibile creare la maggior parte delle schermate possibili. 5 00:21.080 --> 00:30.890 Tuttavia, non avete imparato a costruire uno dei componenti più comuni dell'interfaccia utente delle applicazioni mobili, ovvero 6 00:30.890 --> 00:37.280 cosa succede quando si devono visualizzare più elementi di quanti se ne possano inserire sullo schermo. 7 00:37.280 --> 00:45.320 In questo caso, anche se gli elementi sono tutti composti, 8 00:45.320 --> 00:46.520 le dimensioni limitate dello schermo impediscono di vederli tutti. 9 00:46.520 --> 00:53.930 Ci sono anche situazioni in cui si desidera aggiungere dinamicamente nuovi elementi sullo schermo 10 00:53.960 --> 00:59.810 e poterli comunque vedere tutti, come ad esempio il feed dei social media. 11 00:59.810 --> 01:08.170 La soluzione a questo problema consiste nel permettere ai contenuti di scorrere in verticale o in orizzontale. 12 01:08.170 --> 01:15.100 In questa sezione impareremo ad aggiungere la funzionalità di scorrimento per i nostri layout. 13 01:15.100 --> 01:20.590 Poi introdurremo le liste e le schede di Jetpack Compose. 14 01:20.590 --> 01:24.880 All'interno di questa colonna creerò tre immagini. 15 01:24.910 --> 01:27.580 Iniziamo con la prima immagine componibile. 16 01:27.580 --> 01:30.280 Qui dovrei specificare il pittore. 17 01:30.280 --> 01:36.790 Copio queste immagini e le incollo nella cartella drawable di Android Studio. 18 01:36.820 --> 01:39.670 Foto uno, foto due e foto tre. 19 01:39.670 --> 01:48.340 Ho bisogno di visualizzarli all'interno di jetpack Compose painter resource sono il punto disegnabile 20 01:48.340 --> 01:53.800 pic uno il contenuto descrizione pic uno guadagno Ho bisogno di creare un'altra immagine. 21 01:53.830 --> 01:57.100 Foto due e foto tre. 22 01:57.130 --> 02:08.680 Qui ho bisogno di aggiungere un'altra proprietà per queste immagini, che è la scala del contenuto Limiti di riempimento della scala del contenuto. 23 02:08.710 --> 02:10.900 Ok, è molto semplice. 24 02:13.220 --> 02:18.320 Ora visualizziamo la nostra colonna scorrevole all'interno di Setcontent. 25 02:18.350 --> 02:21.800 Eseguite l'applicazione ed ecco il risultato. 26 02:21.800 --> 02:25.940 Possiamo vedere che l'immagine1 viene visualizzata correttamente. 27 02:25.970 --> 02:33.800 La seconda immagine non viene visualizzata correttamente e la terza non viene visualizzata. 28 02:33.830 --> 02:41.030 La soluzione consiste nel rendere la colonna scrollabile per consentire la 29 02:41.030 --> 02:45.380 corretta visualizzazione delle tre immagini con le loro dimensioni reali. 30 02:45.410 --> 02:49.310 Creare una funzionalità scrollabile per la colonna. 31 02:49.310 --> 02:55.640 Quindi, per rendere la colonna scrollabile, occorre richiamare lo scorrimento verticale all'interno del modificatore. 32 02:55.640 --> 03:01.250 Quindi, qui il modificatore di modifica e ho bisogno di usare lo scorrimento verticale. 33 03:01.280 --> 03:06.020 Qui è necessario passare il ricordo dello stato di scorrimento. 34 03:06.020 --> 03:16.070 Crea uno stato di scorrimento basato sull'orientamento dello scorrimento e mantiene la 35 03:16.070 --> 03:18.970 posizione dello scorrimento in modo da non perderla dopo la decomposizione. 36 03:18.970 --> 03:25.600 In questo caso viene visualizzato un colon, un elenco verticale di elementi. 37 03:25.600 --> 03:32.980 Ma se gli articoli non sono più adatti allo schermo, 38 03:33.010 --> 03:34.420 questo sarà scorrevole e sarà possibile esaminare ogni singolo articolo. 39 03:34.420 --> 03:36.460 Eseguiamo la nostra applicazione. 40 03:36.460 --> 03:38.110 Qui potete vedere il risultato. 41 03:38.110 --> 03:39.760 Questa è l'immagine numero uno. 42 03:39.760 --> 03:41.350 Questa è la foto numero due. 43 03:41.350 --> 03:43.600 E questa è la foto numero tre. 44 03:43.600 --> 03:50.350 Così siamo riusciti a visualizzare le tre immagini in una colonna scorrevole. 45 03:50.350 --> 03:54.670 Ora analizziamo in profondità lo scorrimento verticale e il modificatore. 46 03:54.670 --> 04:02.560 Se passiamo allo scorrimento verticale, possiamo vedere un comportamento di riempimento abilitato e lo scorrimento inverso. 47 04:02.560 --> 04:07.270 Lo stato di scorrimento è lo stato attuale dello scorrimento. 48 04:07.270 --> 04:13.090 Determina l'offset dall'alto e può anche avviarsi o fermarsi. 49 04:13.090 --> 04:22.270 Scorrimento fluido e flinch Animazione abilitata abilita o disabilita lo scorrimento Se 50 04:22.270 --> 04:30.710 è disabilitato, è ancora possibile scorrere programmaticamente alla posizione specifica utilizzando la 51 04:30.710 --> 04:32.960 proprietà state, ma l'utente non può utilizzare i gesti di scorrimento. 52 04:32.960 --> 04:34.520 Comportamento di flessione. 53 04:34.550 --> 04:39.800 Viene utilizzato per eseguire un'animazione di flinch con una determinata velocità. 54 04:39.830 --> 04:45.140 Lo scorrimento inverso consente di invertire la direzione di scorrimento. 55 04:45.140 --> 04:49.190 In altre parole, impostando true si può scorrere verso l'alto. 56 04:49.220 --> 04:53.540 Si noti che il valore predefinito è false. 57 04:53.540 --> 04:58.460 È importante capire che lo scorrimento verticale è un modificatore. 58 04:58.490 --> 05:05.780 Ciò significa che è possibile rendere le composizioni personalizzate componibili e 59 05:05.810 --> 05:08.450 rendere scrollabili anche le composizioni personalizzate, applicandole ad altri modificatori. 60 05:08.450 --> 05:14.690 Se questo si adatta al vostro caso d'uso, potete applicare lo scorrimento verticale a una colonna. 61 05:14.690 --> 05:21.170 Se si desidera applicare lo scorrimento orizzontale, è necessario utilizzare una riga anziché una colonna. 62 05:21.170 --> 05:26.000 Nel prossimo video scopriremo lo scorrimento orizzontale.