1
00:00:02,460 --> 00:00:06,390
Ovviamente, questa schermata in questo momento non è così utile e

2
00:00:06,390 --> 00:00:13,500
quindi ora andrò a quel testo che ho usato come un manichino e lo sostituiremo con diciamo che inizia un nuovo gioco,

3
00:00:13,500 --> 00:00:21,480
qualcosa del genere e sotto questo, voglio avere un area di input con una leggera ombra esterna, quindi questo tipico aspetto di una carta

4
00:00:21,540 --> 00:00:27,420
che potresti conoscere da alcune app e siti Web in cui hai una scatola con una leggera ombra

5
00:00:27,420 --> 00:00:29,220
esterna, forse alcuni angoli arrotondati.

6
00:00:29,400 --> 00:00:36,570
Voglio ricrearlo qui, quindi aggiungerò una vista qui, una vista perché di nuovo è un elemento molto flessibile, possiamo applicare molti stili

7
00:00:36,600 --> 00:00:42,120
lì, possiamo aggiungere la nostra ombra e i nostri angoli arrotondati lì e quindi tenere il nostro

8
00:00:42,150 --> 00:00:43,460
contenuto in quella

9
00:00:43,470 --> 00:00:49,080
vista, quindi è ottimo per avere uno stile generale del contenitore e ora all'interno di quella vista,

10
00:00:49,080 --> 00:00:56,910
voglio avere un testo in cui diciamo di selezionare un numero per esempio e dove poi vogliamo anche avere un campo di testo in cui

11
00:00:57,150 --> 00:00:58,580
gli utenti può inserire qualcosa.

12
00:00:58,590 --> 00:00:59,310
Quindi, aggiungerò

13
00:00:59,430 --> 00:01:06,300
un componente di input di testo che è quel componente incorporato in cui gli utenti possono utilizzare la tastiera per inserire

14
00:01:06,300 --> 00:01:11,970
un valore e qui, dovrebbero inserire un numero. Lo configureremo e lo modelleremo in un

15
00:01:11,970 --> 00:01:17,820
secondo, per ora lo lascerò cadere così e sotto quello, voglio avere due pulsanti uno

16
00:01:17,850 --> 00:01:18,810
accanto all'altro

17
00:01:18,810 --> 00:01:25,190
e questo è importante, uno accanto all'altro, non sotto ciascuno altro che ci consente di ripristinare

18
00:01:25,190 --> 00:01:32,510
l'ingresso e sceglierne uno nuovo o confermare quello scelto. Quindi abbiamo bisogno di una vista qui perché ciò ci consente di posizionare gli

19
00:01:32,660 --> 00:01:37,520
elementi uno accanto all'altro mentre questi elementi sono posizionati uno sopra l'altro quindi perché se solo aggiungessi due pulsanti

20
00:01:37,560 --> 00:01:42,650
qui, allora dovrei cambiare la direzione flessibile di queste viste per averli accanto l'uno all'altro, ma anche il testo

21
00:01:42,680 --> 00:01:45,420
e l'inserimento del testo sarebbero seduti uno accanto all'altro.

22
00:01:45,500 --> 00:01:51,950
Quindi ora aggiungerò una vista qui in modo che in questa vista, la vista circostante, questa, questa e questa componente

23
00:01:52,250 --> 00:01:54,010
della vista siano posizionate

24
00:01:54,020 --> 00:02:00,590
una sopra l'altra, quindi sull'asse verticale ma all'interno di questa vista, ora posso anche assicurarmi che gli oggetti lì dentro

25
00:02:00,590 --> 00:02:05,270
si siedono uno accanto all'altro, quindi nell'asse orizzontale ed è quello che voglio qui.

26
00:02:05,450 --> 00:02:11,480
Quindi importerò il pulsante integrato che è uno dei componenti della vista che si adatta automaticamente

27
00:02:11,510 --> 00:02:17,540
alla piattaforma sottostante, più avanti in un modulo separato, imparerai come puoi scoprire manualmente su

28
00:02:17,630 --> 00:02:21,990
quale piattaforma stai correndo per regolare l'aspetto della tua app.

29
00:02:22,220 --> 00:02:29,450
Qui, andremo con il pulsante integrato e daremo al primo un titolo di reset e il secondo, il secondo

30
00:02:29,510 --> 00:02:32,450
pulsante qui un titolo di conferma e poi

31
00:02:32,450 --> 00:02:39,740
qui, onPress al momento non farà nulla, quindi questo è solo un funzione vuota, aggiungendola solo in modo che abbiamo

32
00:02:39,740 --> 00:02:42,000
già il puntello, aggiungeremo la logica

33
00:02:42,050 --> 00:02:43,710
più tardi e per

34
00:02:43,850 --> 00:02:46,140
ora, avremo solo i pulsanti qui.

35
00:02:46,250 --> 00:02:51,330
Ora lo stile mancherà, tuttavia, come ho detto, il pulsante dovrebbe essere seduto uno accanto all'altro.

36
00:02:51,410 --> 00:02:57,170
Quindi darò questa vista qui che contiene i pulsanti uno stile che punta all'oggetto

37
00:02:57,170 --> 00:02:59,060
stili e lì,

38
00:02:59,060 --> 00:03:02,370
diciamo un contenitore di pulsanti, questo nome come

39
00:03:02,520 --> 00:03:10,930
sempre dipende da te e voglio anche dare questa vista che contiene i miei input un stile qui, facendo riferimento all'oggetto

40
00:03:10,960 --> 00:03:14,930
stili e userò il contenitore di input diciamo, questo nome

41
00:03:15,040 --> 00:03:20,850
ovviamente dipende anche da te e questo qui, voglio modellare questo come un titolo speciale,

42
00:03:20,950 --> 00:03:27,090
forse con una dimensione del carattere più grande, quindi qui, assegnerò uno stile di titolo diciamo.

43
00:03:27,300 --> 00:03:36,900
Ora possiamo andare laggiù nel nostro foglio di stile e aggiungere il titolo, aggiungere il contenitore di input e anche il contenitore dei pulsanti e

44
00:03:37,080 --> 00:03:43,330
ora possiamo iniziare ad aggiungere alcuni stili lì. Ora per il titolo, ancora una volta

45
00:03:43,330 --> 00:03:47,330
voglio impostare la dimensione del carattere, quindi imposterò la dimensione

46
00:03:47,410 --> 00:03:58,750
del carattere in questo modo, impostarla per dire 20 e forse aggiungerò anche una spaziatura sull'asse verticale con margine verticale di diciamo 10, 10 come questo e

47
00:03:58,750 --> 00:04:09,750
tenere sempre a mente, il margine verticale sostanzialmente sostituisce il margine inferiore e il margine superiore e ora sul contenitore dei pulsanti e tornerò al contenitore

48
00:04:09,990 --> 00:04:17,050
di input in un secondo, il contenitore dei pulsanti otterrà una direzione flessibile di riga, il valore

49
00:04:17,060 --> 00:04:19,780
predefinito è colonna ma ora voglio

50
00:04:19,790 --> 00:04:23,790
che gli oggetti si trovino uno accanto all'altro, quindi dobbiamo

51
00:04:23,790 --> 00:04:25,870
usare la riga qui.

52
00:04:25,870 --> 00:04:31,420
Voglio impostare una larghezza qui perché se non impostiamo una larghezza sul contenitore dei pulsanti, sarebbe larga

53
00:04:31,450 --> 00:04:34,960
quanto i due pulsanti sono insieme, invece voglio usare la

54
00:04:34,960 --> 00:04:41,050
larghezza del genitore, quindi di questa vista qui e quindi posizionare i pulsanti all'interno di questa vista, quindi

55
00:04:41,050 --> 00:04:41,880
voglio fare

56
00:04:41,890 --> 00:04:47,140
il contrario, non modellare la vista in base ai pulsanti, ma posizionare i pulsanti in base

57
00:04:47,140 --> 00:04:47,970
alla vista.

58
00:04:48,160 --> 00:04:55,150
Quindi darò al contenitore dei pulsanti questa vista e la larghezza esplicita qui e ora per posizionare i pulsanti lì dentro, possiamo

59
00:04:55,150 --> 00:04:55,590
usare

60
00:04:55,690 --> 00:05:01,630
justifyContent per posizionarli lungo l'asse principale che per la riga della direzione flessibile è da sinistra a destra

61
00:05:01,630 --> 00:05:07,930
e lì sceglierò lo spazio in modo che i pulsanti si trovino sul bordo sinistro e destro di questa riga

62
00:05:07,930 --> 00:05:15,000
e distribuiscano tutto lo spazio libero disponibile tra di loro. Anche qui aggiungi anche un po 'di imbottitura orizzontale in modo da

63
00:05:15,000 --> 00:05:21,660
avere una spaziatura a sinistra e a destra all'interno della nostra vista, forse 15 in modo che i pulsanti non si trovino

64
00:05:21,660 --> 00:05:24,920
direttamente sui bordi a sinistra e a destra ma ci sono

65
00:05:25,020 --> 00:05:29,420
alcuni spaziando a sinistra ea destra. Ok, quindi se

66
00:05:29,560 --> 00:05:35,240
salviamo questo, vediamo ciò che non so di te

67
00:05:35,660 --> 00:05:39,860
ma che non sembra così bello, vero?

68
00:05:39,860 --> 00:05:45,650
Ora il problema è che il contenitore di input non ha ancora stili. Il contenitore di input contiene tutti gli input, motivo per

69
00:05:45,650 --> 00:05:48,340
cui gli stili lì sembrano un po 'fuori.

70
00:05:49,040 --> 00:05:56,000
Quindi dovremmo dare uno stile al contenitore di input e lì, voglio aggiungere una larghezza e ora

71
00:05:56,090 --> 00:06:02,690
puoi usare una larghezza hardcoded di diciamo 300 pixel o usare una larghezza e una percentuale.

72
00:06:02,990 --> 00:06:11,570
Ora aggiungerò una larghezza qui di 300 ma aggiungerò anche una larghezza massima dell'80% in modo da avere una larghezza di 300 pixel ma se il dispositivo sarebbe

73
00:06:11,570 --> 00:06:17,120
troppo piccolo, quindi è un po 'di reattività che aggiungo già qui, se il il dispositivo sarebbe troppo

74
00:06:17,120 --> 00:06:23,300
piccolo, ci assicuriamo che la nostra larghezza non superi l'80%. E poi voglio allineare gli elementi al centro,

75
00:06:23,300 --> 00:06:25,840
tenere presente che il contenitore di

76
00:06:25,850 --> 00:06:29,600
input è una vista, quindi utilizza la flexbox, utilizza il valore

77
00:06:29,600 --> 00:06:35,420
predefinito della colonna di direzione della flessione e quindi con l'allineamento del centro dell'articolo, posizioniamo gli oggetti

78
00:06:35,630 --> 00:06:39,240
al centro sul asse trasversale che è da sinistra a

79
00:06:39,260 --> 00:06:44,500
destra, quindi centriamo gli oggetti in orizzontale. Ora con quello, ora sembra molto meglio, non

80
00:06:44,500 --> 00:06:46,140
possiamo davvero vedere l'input

81
00:06:46,180 --> 00:06:48,780
ma questa è la cosa vecchia, giusto?

82
00:06:48,970 --> 00:06:53,710
Dovremo modellarlo in modo che possiamo davvero vederlo. Tuttavia, vediamo i pulsanti e possiamo

83
00:06:53,710 --> 00:06:57,710
vedere che il nostro layout generale e lo stile stanno prendendo forma.

84
00:06:58,090 --> 00:07:01,440
Tuttavia, non sono ancora soddisfatto al 100% dell'aspetto di questo.