WEBVTT

1
00:00.830 --> 00:02.420
Congratulazioni, ragazzi.

2
00:02.420 --> 00:09.710
Siamo riusciti a inserire il primo nodo
nel database della stanza, ma si tratta di
un approccio dimostrativo.

3
00:09.710 --> 00:13.460
Non lo utilizzeremo nella nostra
applicazione completa.

4
00:13.460 --> 00:20.660
Dobbiamo consentire all'utente di inserire
il nome, il titolo, la descrizione e

5
00:20.660 --> 00:22.580
di scegliere un colore da un selezionatore
di colori per il nodo.

6
00:22.580 --> 00:28.280
Per questo, cancelleremo questo codice
dall'attività principale nel metodo create
e creeremo

7
00:28.280 --> 00:35.300
una nuova classe Kotlin o un file Kotlin
chiamato Display dialog.

8
00:35.300 --> 00:43.250
Questa finestra di dialogo consente
all'utente di inserire il titolo del nodo,
la descrizione del nodo e il colore del
nodo.

9
00:43.250 --> 00:49.940
A tale scopo, creeremo una nuova funzione
componibile, denominata display dialog.

10
00:49.970 --> 00:56.870
Visualizza nodo modale visualizza modale
Inizierò con var title by.

11
00:56.870 --> 01:03.920
Ricordare lo stato mutabile di e dobbiamo
impostare il valore iniziale su questo alt
plus.

12
01:03.920 --> 01:08.550
Invio per importare l'operatore e Alt più
Invio per importare il valore impostato.

13
01:08.580 --> 01:17.460
Dobbiamo creare un'altra variabile,
chiamata description, che ricordi lo

14
01:17.460 --> 01:18.330
stato mutabile di e sia di tipo string.

15
01:18.360 --> 01:23.310
Naturalmente, è necessario creare un altro
colore selezionato da.

16
01:23.310 --> 01:28.380
Ricorda lo stato mutabile di e imposta il
colore sul blu.

17
01:28.410 --> 01:35.580
Anche in questo caso stiamo creando tre
variabili: titolo, descrizione

18
01:35.610 --> 01:36.150
e colore selezionato e abbiamo usato la
parola chiave by.

19
01:36.180 --> 01:39.690
La parola chiave By è utilizzata per la
delega delle proprietà in Kotlin.

20
01:39.690 --> 01:47.250
Consente alla variabile colore
selezionato, ad esempio, di delegare i
suoi getter e

21
01:47.250 --> 01:52.020
setter allo stato mutabile dell'oggetto,
facendola comportare come una variabile di
stato.

22
01:52.020 --> 01:58.740
E ricordare è una funzione componibile che
mantiene lo stato attraverso le
ricomposizioni.

23
01:58.740 --> 02:05.310
Garantisce che lo stato non venga
resettato ogni volta che la funzione
componibile viene ricomposta e mutabile.

24
02:05.340 --> 02:13.110
State of crea un oggetto di stato mutabile
con un valore iniziale di color, dot blue
che

25
02:13.110 --> 02:21.210
può essere letto e modificato; qualsiasi
modifica a questo stato innesca la
ricomposizione delle relative funzioni
componibili.

26
02:21.210 --> 02:30.900
Seguendo questo modello, si ottengono
componenti dell'interfaccia utente
dinamici e reattivi, in grado

27
02:30.900 --> 02:34.170
di reagire efficacemente alle interazioni
dell'utente o ad altri cambiamenti di
stato.

28
02:34.170 --> 02:38.970
Quindi, qui imposteremo una finestra di
dialogo per gli avvisi.

29
02:38.970 --> 02:42.270
E dobbiamo impostare la richiesta di
licenziamento.

30
02:42.270 --> 02:44.160
E quel pulsante di conferma.

31
02:44.190 --> 02:53.490
Alert dialog è una funzione componibile di
Jetpack Compose, utilizzata per creare
finestre

32
02:53.490 --> 02:58.980
modali che tipicamente presentano agli
utenti informazioni o opzioni che
richiedono una decisione.

33
02:59.010 --> 03:07.620
La finestra di dialogo di avviso è un
compositore di alto livello che fornisce
un modo semplice per creare

34
03:07.650 --> 03:14.140
finestre di dialogo standard che includono
testo del titolo, pulsanti di contenuto e
altri elementi componibili e
personalizzabili.

35
03:14.140 --> 03:19.480
È necessario passare la richiesta di
cancellazione e il pulsante di conferma.

36
03:19.510 --> 03:24.310
Si tratta di parametri obbligatori per la
richiesta di licenziamento.

37
03:24.340 --> 03:31.930
Una funzione lambda che viene richiamata
quando l'utente tenta di chiudere la
finestra di

38
03:31.930 --> 03:33.820
dialogo facendo clic al di fuori di essa o
premendo il pulsante indietro.

39
03:33.820 --> 03:38.110
È qui che di solito si aggiorna lo stato
per nascondere la finestra di dialogo.

40
03:38.110 --> 03:42.910
Il titolo, che è una funzione componibile
che definisce il titolo della finestra di
dialogo.

41
03:42.910 --> 03:43.720
Il testo.

42
03:43.750 --> 03:50.920
Una funzione componibile che definisce il
contenuto del testo principale del
pulsante di conferma della finestra di
dialogo è una funzione componibile.

43
03:50.920 --> 03:54.430
Definizione del pulsante di conferma
dell'azione.

44
03:54.430 --> 04:01.060
Il pulsante Dismiss è una funzione
componibile che definisce il pulsante per
chiudere o annullare la finestra di
dialogo.

45
04:01.060 --> 04:08.050
Si possono notare le annotazioni
componibili per l'icona, il titolo, il

46
04:08.050 --> 04:09.040
pulsante di eliminazione del testo e il
pulsante di conferma.

47
04:09.070 --> 04:16.300
Il modificatore che utilizza le proprietà
di stile e il parametro opzionale per
impostare le proprietà della

48
04:16.300 --> 04:19.370
finestra di dialogo, ad esempio se la
finestra di dialogo può essere chiusa
facendo clic all'esterno.

49
04:19.370 --> 04:26.360
E queste sono le quattro personalizzazioni
e altre ancora, come ad esempio il
contenuto

50
04:26.360 --> 04:29.300
del testo, il colore del titolo, il
contenuto, il colore dell'icona e altro.

51
04:29.330 --> 04:35.090
Ok, questo è l'alertdialog componibile in
Jetpack Compose su richiesta di
licenziamento.

52
04:35.090 --> 04:37.220
Non ho intenzione di creare nulla qui.

53
04:37.220 --> 04:42.920
Titolo Ho bisogno di impostarlo come un
nuovo testo componibile inserire.

54
04:42.950 --> 04:48.320
Se si torna alla dichiarazione, si può
notare che il titolo è un elemento
componibile.

55
04:48.320 --> 04:51.200
Quindi è necessario impostare un testo
componibile.

56
04:51.230 --> 04:54.560
È inoltre necessario impostare un testo.

57
04:54.590 --> 04:57.680
Il testo qui presente è un altro
componibile.

58
04:57.680 --> 05:01.280
Per questo è necessario creare altri
compositori.

59
05:01.280 --> 05:08.120
Qui voglio che vi concentriate su di me,
perché imposterò i campi

60
05:08.120 --> 05:10.310
di testo e il selezionatore di colori
all'interno del parametro testo colon.

61
05:10.310 --> 05:14.030
E all'interno di questo colon dobbiamo
creare due campi di testo.

62
05:14.030 --> 05:21.650
Il primo prenderà il valore del parametro
title che abbiamo creato prima sulla
catena di

63
05:21.650 --> 05:30.050
valori, dobbiamo impostare il title su
width e il label su un'altra funzione
componibile.

64
05:30.080 --> 05:34.370
Impostare come titolo del nodo un altro
campo di testo.

65
05:34.400 --> 05:41.390
L'impostazione del valore della variabile
description, creata prima di impostare il
cambiamento

66
05:41.420 --> 05:50.000
di valore su description, è uguale ad essa
e l'etichetta è

67
05:50.000 --> 05:51.170
uguale a un'altra funzione componibile,
che è il nodo text description.

68
05:51.200 --> 05:54.950
Creare un distanziatore tra questi due
campi di testo.

69
05:54.950 --> 05:58.910
Modificatore altezza punti otto DP.

70
05:59.150 --> 06:06.980
Importare la classe del modificatore e del
modificatore componibile,

71
06:07.010 --> 06:07.700
quindi è necessario scegliere il
modificatore UI corretto.

72
06:07.730 --> 06:09.650
Poi un altro distanziale.

73
06:09.650 --> 06:13.100
Lo copio e lo incollo qui 16 DP.

74
06:13.100 --> 06:18.050
E qui creeremo un selezionatore di colori
componibile