1
00:00:02,380 --> 00:00:08,860
Ora nell'elenco che stiamo visualizzando qui, i nostri elementi dell'elenco sono larghi come l'elenco perché stiamo avvolgendo l'elenco in questa vista qui intorno

2
00:00:10,090 --> 00:00:12,140
alla nostra vista di scorrimento, quindi questo

3
00:00:12,140 --> 00:00:17,290
imposta la larghezza per la vista di scorrimento aggiungi che imposta la larghezza per il oggetti lì dentro.

4
00:00:17,290 --> 00:00:22,330
Ora supponiamo che qui abbiamo una larghezza diversa sull'elemento dell'elenco, diciamo che la larghezza di un elemento dell'elenco dovrebbe

5
00:00:22,330 --> 00:00:24,330
essere solo il 60% dell'elenco, quindi

6
00:00:24,340 --> 00:00:30,760
non è il 100% che è l'impostazione predefinita ma solo il 60%. Se lo facciamo e iniziamo, ora vedi che si

7
00:00:30,760 --> 00:00:35,570
trova a sinistra, il che ha senso, il posizionamento predefinito qui se imposti una

8
00:00:35,620 --> 00:00:42,400
larghezza su un elemento che è all'interno di un flexbox e gli elementi dell'elenco sono all'interno di un flexbox perché

9
00:00:42,400 --> 00:00:49,420
la vista di scorrimento internamente usa anche il flexbox alla fine, anche se ci sono alcune differenze rispetto al normale

10
00:00:49,600 --> 00:00:55,550
flexbox e tornerò a quelli ma usa ancora il flexbox e quindi poiché impostiamo una larghezza, l'impostazione

11
00:00:55,580 --> 00:01:03,250
predefinita di allungamento degli elementi figlio lungo l'asse trasversale e l'asse trasversale sarebbe l'asse orizzontale perché per impostazione predefinita abbiamo la colonna

12
00:01:03,250 --> 00:01:08,950
di direzione flessibile, ma lo stiramento predefinito viene sovrascritto perché abbiamo una larghezza sulla nostra voce

13
00:01:08,950 --> 00:01:14,890
di elenco, quindi sui nostri elementi figlio. Ora potremmo comunque voler centrare questi elementi nell'elenco

14
00:01:14,890 --> 00:01:20,620
e per questo, puoi andare alla vista di scorrimento e assegnare uno stile lì, anche se

15
00:01:20,620 --> 00:01:21,430
non

16
00:01:21,430 --> 00:01:28,000
attraverso il puntello di stile che puoi usare ma che non ti consente di modellare nulla ma per

17
00:01:28,000 --> 00:01:34,720
dare uno stile al contenuto in una vista a scorrimento e applicare, ad esempio, le impostazioni flessibili per il

18
00:01:34,720 --> 00:01:40,090
contenuto, è necessario utilizzare lo stile del contenitore del contenuto e questo è solo

19
00:01:40,090 --> 00:01:47,260
qualcosa da memorizzare o da cercare nei documenti ufficiali, ovviamente. Per la vista di scorrimento e per FlatList, hai lo stile del contenitore di contenuti

20
00:01:47,260 --> 00:01:50,140
che usi per controllare il layout all'interno di quella vista di scorrimento.

21
00:01:50,230 --> 00:01:56,620
Ora qui su quello stile del contenitore di contenuti, ora possiamo fare riferimento all'elenco degli stili e, quindi, fammi effettivamente rinominare

22
00:01:56,620 --> 00:02:02,320
questo stile di elenco corrente che stiamo applicando a quella vista di avvolgimento del contenitore dell'elenco perché alla fine

23
00:02:02,320 --> 00:02:06,670
è un contenitore attorno al nostro elenco e questo qui è l'elenco stesso.

24
00:02:06,670 --> 00:02:11,750
In alternativa, avresti potuto nominare questo contenuto dell'elenco ovviamente, ma lo chiamerò semplicemente elenco e

25
00:02:11,750 --> 00:02:16,810
rinominerò l'altra cosa per elencare il contenitore. Pertanto, questo qui verrà rinominato per elencare il contenitore

26
00:02:16,810 --> 00:02:21,700
e ora possiamo aggiungere una nuova proprietà dell'elenco qui al foglio di stile e questo è

27
00:02:21,760 --> 00:02:28,060
ora all'interno della vista di scorrimento, dando uno stile al nostro contenitore o disponendo il contenuto del nostro contenitore per essere

28
00:02:28,060 --> 00:02:34,750
precisi e lì, poiché questo utilizza scatola flessibile internamente, è possibile utilizzare gli elementi di allineamento per controllare l'allineamento lungo l'asse trasversale e

29
00:02:34,810 --> 00:02:41,380
impostarlo al centro e questo dovrebbe ora assicurarsi che gli elementi siano nuovamente centrati nel caso siano più piccoli e questo è

30
00:02:41,380 --> 00:02:43,440
effettivamente ciò che sta accadendo qui.

31
00:02:43,510 --> 00:02:50,170
Quindi, con ciò, sai come controllare e disporre il contenuto all'interno di una vista

32
00:02:50,170 --> 00:02:58,660
di scorrimento o di un elenco in generale. E se volessi controllare anche il flexbox lungo l'asse principale?

33
00:02:58,660 --> 00:03:06,520
Diciamo che il nostro elenco qui in realtà non dovrebbe iniziare proprio sotto questa casella qui con i nostri controlli ma un po 'più

34
00:03:06,520 --> 00:03:11,620
in basso, dovrebbe iniziare nella parte inferiore dello schermo e poi crescere fino in cima e

35
00:03:11,620 --> 00:03:14,500
quindi essere scorrevole solo quando raggiunge il superiore.

36
00:03:14,520 --> 00:03:21,590
Questo può anche essere controllato con il nostro stile di elenco che è lo stile applicato allo stile del contenitore di

37
00:03:21,590 --> 00:03:27,350
contenuti, quindi con questo stile di contenitore di contenuto, puoi controllare anche questo aggiungendo il giustificativo perché

38
00:03:27,350 --> 00:03:33,440
il contenuto giustificato consente di posizionare il contenuto lungo l'asse principale del flexbox e l'asse principale del

39
00:03:33,440 --> 00:03:38,430
flexbox di default è l'asse verticale perché la direzione predefinita è la colonna.

40
00:03:38,600 --> 00:03:45,410
Quindi qui, ora usiamo la fine flessibile invece dell'impostazione predefinita che è l'inizio flessibile e la fine flessibile ora dovrebbe effettivamente spostare

41
00:03:45,410 --> 00:03:47,350
gli elementi alla fine dell'elenco.

42
00:03:47,360 --> 00:03:48,740
Quindi vediamo se

43
00:03:49,870 --> 00:03:50,480
funziona,

44
00:03:50,570 --> 00:03:52,590
eh, non sembra funzionare, giusto?

45
00:03:52,610 --> 00:03:59,670
Il problema qui è che la vista di scorrimento aumenta solo questa vista interna che avvolge alla fine quando vengono

46
00:03:59,670 --> 00:04:01,360
aggiunti nuovi elementi, ora

47
00:04:01,370 --> 00:04:06,310
vogliamo che quella vista interna cresca automaticamente. In una visione normale,

48
00:04:06,320 --> 00:04:08,800
raggiungeremo questo obiettivo aggiungendo uno flessibile.

49
00:04:08,990 --> 00:04:14,170
Quindi proviamo qui in questo elenco di stili che aggiungiamo anche alla vista di scorrimento.

50
00:04:14,180 --> 00:04:21,570
Se lo aggiungiamo qui, ora vedi che si comporta correttamente, inizia qui in basso e ora coltiviamo questo

51
00:04:21,600 --> 00:04:23,860
e speriamo di non

52
00:04:24,450 --> 00:04:32,870
risolverlo troppo presto e vedi, possiamo scorrere. Quindi questo in realtà sta crescendo e funziona esattamente come vogliamo. È scorrevole e generalmente funziona

53
00:04:32,890 --> 00:04:39,000
nel modo desiderato, ma noterai che non puoi davvero farlo scorrere in modo

54
00:04:39,000 --> 00:04:45,420
tale da vedere sempre l'elemento più recente. Puoi scorrere lì ma poi salta indietro e probabilmente

55
00:04:45,420 --> 00:04:48,270
non è quello che vogliamo, su Android, inoltre

56
00:04:48,270 --> 00:04:50,370
non funziona. Lì, se

57
00:04:50,370 --> 00:04:53,340
ora iniziamo a indovinare, vedrai lo stesso

58
00:04:53,340 --> 00:04:59,110
comportamento, beh, se ci arrivassi, l'unica differenza è che si è rotto per un

59
00:04:59,140 --> 00:05:05,320
motivo diverso, non riesco nemmeno a scorrere. Quindi Flex One non fa davvero il lavoro, quello che puoi usare lì è

60
00:05:05,320 --> 00:05:11,170
qualcosa che non abbiamo mai usato prima e che Flex Flex cresce. Ora flex grow si assicura anche che

61
00:05:11,230 --> 00:05:17,230
l'elemento a cui si aggiunge questo cresca e occupi più spazio possibile, proprio come flex

62
00:05:17,230 --> 00:05:23,150
one, la differenza è che flex grow funziona un po 'diversamente internamente, è più

63
00:05:23,260 --> 00:05:26,250
flessibile di flex. Flex dice semplicemente di prendere

64
00:05:26,290 --> 00:05:32,050
tutto lo spazio disponibile in tutte le direzioni che puoi ottenere, flex grow in sostanza indica al contenitore di

65
00:05:32,050 --> 00:05:38,980
essere in grado di crescere, di essere in grado di occupare tutto lo spazio che può ottenere e lo farà, ma mantiene

66
00:05:38,980 --> 00:05:39,580
l'altro

67
00:05:39,780 --> 00:05:45,280
comportamento che ha normalmente, in questo caso della vista di scorrimento, in cui è scorrevole e può

68
00:05:45,310 --> 00:05:47,300
superare anche i confini dello schermo.

69
00:05:47,320 --> 00:05:53,080
Quindi è un po 'più flessibile e probabilmente non ne hai bisogno così spesso in una vista normale ma in

70
00:05:53,080 --> 00:05:54,720
una vista di scorrimento, è esattamente

71
00:05:54,820 --> 00:06:00,340
ciò di cui abbiamo bisogno e lo sto mostrando qui perché questo è un caso speciale che devi solo

72
00:06:00,340 --> 00:06:01,680
sai o su cosa

73
00:06:01,760 --> 00:06:07,420
potresti inciampare e in genere trovi quindi soluzioni su overflow dello stack e così via, qui lo trovi in questo

74
00:06:07,660 --> 00:06:12,520
corso perché è uno scenario che potresti incontrare e quindi, si spera, puoi quindi ricordare questa lezione

75
00:06:12,520 --> 00:06:14,140
e vedere come risolvi questo.

76
00:06:14,170 --> 00:06:20,410
Quindi ho aggiunto flex grow a quella proprietà dell'elenco e ora diamo un altro tentativo. Qui su iOS, se iniziamo a

77
00:06:20,530 --> 00:06:30,520
indovinare i numeri qui, ora vedi che posso effettivamente scorrere in modo tale che l'ultimo elemento sia visibile e posso ancora scorrere in modo

78
00:06:30,610 --> 00:06:33,750
tale che l'elemento più vecchio sia visibile, quindi

79
00:06:33,760 --> 00:06:37,620
ora questo mostra il comportamento che vogliamo, grazie crescere flessibile.

80
00:06:37,750 --> 00:06:41,480
E su Android, sarà lo stesso se iniziamo un gioco

81
00:06:45,510 --> 00:06:52,140
lì, vedi ora posso scorrere anche qui e posso vedere sia le ipotesi più recenti che quelle più vecchie.

82
00:06:52,200 --> 00:06:58,860
Quindi ora funziona nel modo in cui dovrebbe essere qui su Android e iOS e stavo mostrando tutto questo semplicemente in modo che

83
00:06:59,070 --> 00:07:05,490
tu sia a conoscenza di questi schemi, di questo speciale stile contenitore di contenuti sulla vista di scorrimento e volevo anche assicurarmi

84
00:07:05,670 --> 00:07:09,960
che tu eravamo a conoscenza di alcuni dei problemi che potresti incontrare quando inizi a

85
00:07:09,960 --> 00:07:15,180
disegnare lo stile e quando vuoi aggiungere il tuo layout lì, quindi questi sono alcuni trucchi che possono

86
00:07:15,180 --> 00:07:18,510
essere molto utili se incontri quella situazione nella tua app.