WEBVTT 1 00:01.070 --> 00:03.560 In questo video parleremo dei pulsanti. 2 00:03.560 --> 00:04.100 In jetpack. 3 00:04.100 --> 00:10.130 I pulsanti di composizione sono componenti fondamentali che consentono agli utenti di attivare azioni definite. 4 00:10.130 --> 00:14.330 Esploriamo i diversi tipi di pulsanti e il loro utilizzo. 5 00:14.330 --> 00:16.580 Il primo tipo è il pulsante di campo. 6 00:16.580 --> 00:21.440 Il pulsante di campo è un pulsante a tinta unita con testo a contrasto. 7 00:21.440 --> 00:26.420 È adatto per azioni molto enfatizzate, come l'invio o il salvataggio. 8 00:26.450 --> 00:30.770 Si usa quando si vuole sottolineare l'importanza di un'azione primaria. 9 00:30.770 --> 00:38.570 Iniziamo con l'aggiunta di una funzione di annotazione componibile riempita 10 00:38.570 --> 00:39.140 di pulsanti, e qui inizierò a definire il pulsante. 11 00:39.140 --> 00:40.040 Componibile. 12 00:40.040 --> 00:46.040 Se andiamo sul controllo componibile del pulsante e lo spostiamo con il tasto sinistro del 13 00:46.040 --> 00:52.880 mouse, possiamo vedere che ci sono molti parametri come onClick, il modificatore abilitato, la forma, 14 00:52.880 --> 00:54.290 i colori, l'elevazione, il contenuto del bordo, il padding, l'interazione, l'origine e il contenuto. 15 00:54.320 --> 01:02.270 La cosa più importante e obbligatoria è che onClick, l'onclick è un 16 01:02.300 --> 01:07.250 parametro per il pulsante componibile che prende come argomento un'espressione lambda. 17 01:07.250 --> 01:11.050 Il lambda viene eseguito quando si fa clic sul pulsante. 18 01:11.050 --> 01:19.750 All'interno di queste parentesi graffe, dobbiamo definire il nostro lambda che sarà eseguito quando il pulsante viene cliccato. 19 01:19.750 --> 01:20.500 Rimuovere questo. 20 01:20.500 --> 01:27.370 Per farlo, devo specificare l'azione che sarà eseguita quando si fa clic sul pulsante. 21 01:27.370 --> 01:34.030 Ad esempio, il login v e rendere il messaggio tangibile e l'utente ha fatto clic sul pulsante. 22 01:34.060 --> 01:41.950 È possibile aggiungere un composable di testo o qualsiasi altro 23 01:41.980 --> 01:42.640 composable come elementi figli del pulsante, ad esempio il testo. 24 01:42.640 --> 01:47.440 Quindi ho creato un testo componibile all'interno del pulsante componibile. 25 01:47.470 --> 01:53.800 Scorrete verso il basso per aggiungerlo all'anteprima, quindi selezionate la modalità di divisione ed ecco fatto. 26 01:53.830 --> 01:55.690 Questo è il nostro pulsante. 27 01:56.920 --> 02:02.110 Chiamiamo questo pulsante pieno componibile all'interno del metodo Setcontent. 28 02:02.140 --> 02:07.240 Quindi eseguire l'applicazione, aprire Logcat e cercare il tag. 29 02:07.270 --> 02:09.910 Questa è la nostra applicazione. 30 02:09.910 --> 02:11.890 Abbiamo questo pulsante. 31 02:11.890 --> 02:13.570 Proverò a fare clic su di esso. 32 02:13.600 --> 02:19.430 Facendo clic su di esso, viene visualizzato un messaggio di logcat che indica che è stato fatto clic sul pulsante. 33 02:19.430 --> 02:22.160 Quindi il nostro pulsante funziona bene. 34 02:22.160 --> 02:30.320 Eseguirà questo codice all'interno del parametro onclick e questo lambda 35 02:30.320 --> 02:32.000 sarà eseguito ogni volta che il pulsante viene cliccato. 36 02:32.000 --> 02:38.360 Inoltre, è possibile vedere il testo componibile all'interno del pulsante, ma qui c'è una nota molto importante. 37 02:38.360 --> 02:39.590 Dovrei menzionarlo. 38 02:39.590 --> 02:43.970 Questo non è il modo migliore per gestire gli eventi click. 39 02:43.970 --> 02:50.000 È comune definire una funzione onclick in un altro punto 40 02:50.030 --> 02:50.720 del codice che contenga l'azione che si desidera eseguire. 41 02:50.720 --> 02:55.100 Quando il pulsante viene cliccato e passa l'onclick come parametro. 42 02:55.100 --> 02:55.970 In seguito, lo faremo. 43 02:56.000 --> 03:00.440 Quando si parla di compositori stateful e stateless, se ne parla. 44 03:00.440 --> 03:09.050 Posso definire onClick, che è un'espressione lambda che non restituisce 45 03:09.050 --> 03:11.180 nulla, e qui posso tagliare il logcat e all'interno dell'onclick. 46 03:11.180 --> 03:16.250 Qui definisco l'espressione lambda onclick che viene passata come parametro. 47 03:16.250 --> 03:22.780 E quando si chiama il pulsante composable filled all'interno 48 03:22.780 --> 03:23.170 di setcontent, è necessario passare l'espressione lambda qui. 49 03:23.170 --> 03:30.070 Si cerca di iniziare con le parentesi graffe e si passa lo stesso messaggio di log v. 50 03:30.100 --> 03:36.430 Provare a eseguire, selezionare logcat e fare clic sul pulsante per visualizzare un altro messaggio. 51 03:36.460 --> 03:43.870 Ok, questo è l'approccio migliore per gestire gli eventi click e 52 03:43.870 --> 03:45.400 passare la gestione dell'evento click per il pulsante come parametro. 53 03:45.400 --> 03:50.170 Più avanti parleremo di questo aspetto nei compositori stateful e stateless. 54 03:50.170 --> 03:54.010 Il secondo tipo di pulsanti è il tonale pieno. 55 03:54.040 --> 04:00.070 Il pulsante tonale riempito ha un colore di sfondo variabile per adattarsi alla superficie. 56 04:00.100 --> 04:04.840 È adatto anche per azioni primarie o significative. 57 04:04.840 --> 04:08.530 Utilizzatelo per funzioni come l'aggiunta al carrello o l'accesso. 58 04:08.530 --> 04:16.240 Per definire un pulsante tonale pieno, inizierò con la funzione di annotazione componibile fill tonal. 59 04:16.240 --> 04:21.340 Allo stesso modo si definisce qui il parametro click nella tonalità di riempimento. 60 04:21.340 --> 04:24.820 Poi inizierò con il pulsante tonale riempito. 61 04:24.820 --> 04:33.080 Questo è il controllo del pulsante tonale riempito composito e il tasto sinistro del mouse per accedere ai parametri compositi 62 04:33.080 --> 04:40.490 che abbiamo al clic, che è il modificatore di parametri obbligatorio per abilitare la forma, i colori e altri. 63 04:40.520 --> 04:44.570 Ok, è simile al pulsante riempito qui nell'onclick. 64 04:44.600 --> 04:49.070 Definisco il lambda onClick che viene passato come parametro. 65 04:49.100 --> 04:56.480 Inoltre, è possibile definire un altro Composable all'interno del pulsante di 66 04:56.480 --> 04:58.280 riempimento tonale; qui imposterò il testo come pulsante di riempimento tonale. 67 04:58.310 --> 04:59.270 Saliamo. 68 04:59.270 --> 05:08.420 E qui, all'interno di Setcontent, definirò una colonna per poter ospitare i pulsanti in modo colonnare. 69 05:08.450 --> 05:12.860 Poi chiamerò il pulsante di riempimento tonale che abbiamo definito. 70 05:12.860 --> 05:17.120 E poi devo passare il messaggio di lookat. 71 05:17.120 --> 05:19.670 E qui si fa clic sul pulsante tonale. 72 05:19.700 --> 05:21.170 Eseguiamo la nostra applicazione. 73 05:21.170 --> 05:24.230 E si possono vedere questi tipi di pulsanti. 74 05:24.230 --> 05:25.850 Questo è il pulsante di riempimento tonale. 75 05:25.850 --> 05:27.740 Se faccio clic su di esso, si va alla pagina di ricerca. 76 05:27.770 --> 05:30.140 Si può notare che il pulsante tonale è cliccato. 77 05:30.140 --> 05:30.950 Nel prossimo video. 78 05:30.980 --> 05:33.650 Continuiamo con i pulsanti e i loro tipi.