WEBVTT

1
00:00.350 --> 00:02.330
Ciao e bentornato.

2
00:02.330 --> 00:04.970
In questo video parleremo delle caselle di
controllo.

3
00:05.000 --> 00:12.680
Una casella di controllo è un componente
dell'interfaccia utente che consente
all'utente di passare da uno stato
all'altro, in genere spuntato o non
spuntato.

4
00:12.680 --> 00:20.240
È comunemente usato nei moduli, nelle
impostazioni, nelle schermate e in

5
00:20.240 --> 00:21.170
tutte le situazioni in cui è necessario
rappresentare scelte binarie.

6
00:21.170 --> 00:27.050
Vi illustro un semplice esempio di
utilizzo di una casella di controllo in
Jetpack Compose.

7
00:27.080 --> 00:33.980
Per prima cosa dobbiamo creare una
funzione componibile, e qui ho bisogno di
dichiarare la variabile.

8
00:34.010 --> 00:38.090
Inizierò con il var controllato da.

9
00:38.120 --> 00:45.680
Ricordare lo stato mutabile di e usare lo
stato mutabile falso di.

10
00:45.710 --> 00:50.390
Questa funzione crea un supporto di stato
per il valore mutabile.

11
00:50.390 --> 00:58.910
In questo caso, crea uno stato mutabile
che contiene un valore booleano
inizialmente falso.

12
00:58.910 --> 01:07.990
La funzione mutable state restituisce un
oggetto mutable state, che ha due

13
01:08.020 --> 01:15.520
importanti proprietà: value, che
rappresenta il valore corrente dello
stato, e

14
01:15.520 --> 01:18.580
set value, che è una funzione usata per
aggiornare lo stato.

15
01:18.610 --> 01:22.660
Per saperne di più sugli Stati, consultare
la sezione precedente.

16
01:22.690 --> 01:31.510
Ricordiamo che la funzione remember viene
utilizzata per conservare

17
01:31.510 --> 01:32.290
lo stato attraverso le ricomposizioni
della funzione componibile.

18
01:32.320 --> 01:41.170
Assicura che lo stato non venga
ricalcolato ogni volta che viene
richiamata la

19
01:41.170 --> 01:44.350
funzione componibile, ma che il valore
venga memorizzato tra le varie
ricomposizioni.

20
01:44.380 --> 01:52.930
In sintesi, questa riga crea una variabile
mutabile checked, il cui valore

21
01:52.930 --> 01:55.990
viene ricordato in tutte le ricomposizioni
ed è inizialmente impostato su false.

22
01:56.020 --> 02:04.570
Questa variabile contiene lo stato della
casella di controllo, consentendoci di
tenere traccia del suo stato

23
02:04.600 --> 02:10.240
selezionato o deselezionato
Nell'interfaccia utente di Jetpack
Compose, dobbiamo dichiarare la casella di
controllo compostabile.

24
02:10.240 --> 02:16.370
Quindi, selezionate la casella di
controllo e assicuratevi di usare la
casella di controllo, che è un elemento
componibile.

25
02:16.370 --> 02:19.550
Questo è il logo, che è una funzione
componibile.

26
02:19.550 --> 02:24.710
Abbiamo due parametri che devono essere
compilati obbligatoriamente.

27
02:24.710 --> 02:27.230
I controlli e i non controlli cambiano.

28
02:27.230 --> 02:34.280
Checked è un parametro di tipo booleano e
rappresenta lo stato attuale della casella
di controllo.

29
02:34.280 --> 02:40.070
In questo caso, è legata alla variabile
checked dichiarata in precedenza.

30
02:40.070 --> 02:47.270
Quando checked è true, la casella di
controllo viene visualizzata come checked
e quando è false, la casella di

31
02:47.270 --> 02:54.710
controllo viene visualizzata come
unchecked, quindi devo assegnarla alla
variabile checked che abbiamo dichiarato
prima della modifica di unchecked.

32
02:54.710 --> 03:02.390
Questo parametro è una funzione lambda che
accetta un singolo parametro di tipo
booleano, che

33
03:02.390 --> 03:07.700
rappresenta il nuovo stato della casella
di controllo dopo che l'utente ha
interagito con essa.

34
03:07.730 --> 03:12.350
In questo esempio viene controllata
un'espressione lambda.

35
03:12.350 --> 03:13.790
Quindi lasciate che vi mostri.

36
03:13.820 --> 03:14.510
È controllato.

37
03:14.510 --> 03:22.600
Sto impostando la variabile checked sul
booleano is checked, quindi sto assegnando
questa variabile a.

38
03:22.600 --> 03:29.170
Questo viene controllato quando l'utente
interagisce con la casella di controllo,
selezionandola o deselezionandola.

39
03:29.170 --> 03:34.930
Questa funzione lambda viene chiamata con
un nuovo stato che viene controllato
all'interno della funzione lambda.

40
03:34.930 --> 03:42.490
Aggiorniamo la variabile checked con il
nuovo stato, aggiornando di fatto

41
03:42.490 --> 03:44.710
lo stato del controllo checkbox e del clic
del mouse.

42
03:44.710 --> 03:46.480
Possiamo passare alla casella di
controllo.

43
03:46.510 --> 03:49.960
Si possono vedere i parametri controllati
e non controllati modificati.

44
03:49.960 --> 03:57.490
Si tratta di due parametri obbligatori: i
colori abilitati dal modificatore e la
fonte di interazione.

45
03:57.490 --> 04:01.090
Siamo interessati al cambiamento
controllato e non controllato.

46
04:01.090 --> 04:07.030
Richiamo l'esempio della casella di
controllo all'interno di Setcontent ed
eseguo l'applicazione.

47
04:07.030 --> 04:08.230
Ed eccoci qui.

48
04:08.260 --> 04:09.970
Questa è la nostra casella di controllo.

49
04:09.970 --> 04:12.580
Questo è selezionato e questo è
deselezionato.

50
04:12.610 --> 04:19.390
Ora aggiungiamo alcune funzionalità per il
controllo all'interno del cambiamento di
controllo, ho bisogno di visualizzare un

51
04:19.390 --> 04:24.350
messaggio di brindisi che ci dica che lo
stato della casella di controllo non fa
testo.

52
04:24.380 --> 04:28.430
Qui è necessario passare il contesto e il
messaggio.

53
04:35.750 --> 04:40.490
Durata e esterno Ho bisogno di
visualizzare un metodo di visualizzazione.

54
04:40.520 --> 04:43.100
Corriamo ed eccoci qua.

55
04:43.130 --> 04:46.550
Selezionate la casella di controllo e
vedrete che il controllo è vero.

56
04:46.580 --> 04:49.220
Se il controllo è falso, deselezionarlo.

57
04:49.220 --> 04:51.380
Quindi, congratulazioni ragazzi.

58
04:51.380 --> 04:53.780
Abbiamo imparato a conoscere una casella
di controllo.

59
04:53.780 --> 05:00.710
Per fare un rapido riepilogo, checkbox è
un elemento composito utilizzato per

60
05:00.710 --> 05:06.980
visualizzare una casella di controllo
dell'interfaccia utente che richiede due
parametri importanti,

61
05:06.980 --> 05:08.780
ovvero checked e uncheck, che
rappresentano lo stato della casella di
controllo.

62
05:08.780 --> 05:15.470
E la modifica non selezionata è una
funzione Lambda chiamata quando

63
05:15.470 --> 05:16.340
l'utente interagisce con la casella di
controllo per aggiornarne lo stato.

64
05:16.340 --> 05:23.480
Questo ci consente di controllare il
comportamento della casella di controllo
in risposta all'input dell'utente.