1
00:00:02,380 --> 00:00:08,860
Agora, na lista que estamos renderizando aqui, nossos itens de lista são tão amplos quanto a lista, porque estamos agrupando a lista nessa visualização

2
00:00:10,090 --> 00:00:12,140
aqui em torno da visualização de rolagem;

3
00:00:12,140 --> 00:00:17,290
portanto, isso define a largura da adição de visualização de rolagem que define a largura da itens lá.

4
00:00:17,290 --> 00:00:22,330
Agora, digamos que tenhamos uma largura diferente aqui no item da lista, digamos que a largura de um

5
00:00:22,330 --> 00:00:24,330
item da lista deva ser apenas

6
00:00:24,340 --> 00:00:30,760
60% da lista, portanto, não é 100% o padrão, mas apenas 60%. Se fizermos isso e começarmos, agora você vê isso

7
00:00:30,760 --> 00:00:35,570
à esquerda, o que faz sentido, o posicionamento padrão aqui se você definir uma

8
00:00:35,620 --> 00:00:42,400
largura em um item que esteja dentro de uma caixa flexível e os itens da lista estiverem dentro de uma

9
00:00:42,400 --> 00:00:49,420
caixa flexível porque a exibição de rolagem internamente também usa flexbox no final, apesar de haver algumas diferenças em relação ao

10
00:00:49,600 --> 00:00:55,550
flexbox normal e voltarei a elas, mas ele ainda usa flexbox e, portanto, como definimos uma largura, o

11
00:00:55,580 --> 00:01:03,250
padrão de esticar itens filho ao longo do eixo transversal e o eixo cruzado seria o eixo horizontal porque temos a coluna de

12
00:01:03,250 --> 00:01:08,950
direção flexível como padrão, mas o alongamento padrão é substituído porque temos uma largura em nosso item

13
00:01:08,950 --> 00:01:14,890
de lista, assim como em nossos elementos filhos. Agora, ainda podemos querer centralizar esses itens na

14
00:01:14,890 --> 00:01:20,620
lista e, para isso, você pode ir para a exibição de rolagem e atribuir um

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

16
00:01:21,430 --> 00:01:28,000
lá, embora não através do suporte de estilo que você pode usar, mas que não permite estilizar nada.

17
00:01:28,000 --> 00:01:34,720
mas para estilizar o conteúdo em uma exibição de rolagem e aplicar, por exemplo, configurações flexíveis para o

18
00:01:34,720 --> 00:01:40,090
conteúdo, você precisa usar o estilo do contêiner de conteúdo e isso é apenas

19
00:01:40,090 --> 00:01:47,260
algo para memorizar ou pesquisar nos documentos oficiais, é claro. Para a exibição de rolagem e para o FlatList, você tem esse estilo de contêiner

20
00:01:47,260 --> 00:01:50,140
de conteúdo usado para controlar o layout dentro dessa exibição de rolagem.

21
00:01:50,230 --> 00:01:56,620
Agora, nesse estilo de contêiner de conteúdo, agora podemos nos referir à lista de estilos e, portanto, deixe-me renomear esse estilo

22
00:01:56,620 --> 00:02:02,320
de lista atual que estamos aplicando a esse agrupamento, exibir o contêiner de lista, porque no final é um

23
00:02:02,320 --> 00:02:06,670
contêiner em torno de nossa lista e isso aqui é a própria lista.

24
00:02:06,670 --> 00:02:11,750
Como alternativa, você poderia ter nomeado o conteúdo desta lista, é claro, mas vou apenas nomear a lista e

25
00:02:11,750 --> 00:02:16,810
renomear a outra coisa para listar o container. Portanto, isso aqui será renomeado para listar contêiner

26
00:02:16,810 --> 00:02:21,700
e agora podemos adicionar uma nova propriedade de lista aqui à folha de estilo e que

27
00:02:21,760 --> 00:02:28,060
agora está dentro da visualização de rolagem, estilizando nosso contêiner ou exibindo nosso conteúdo de contêiner para ser preciso e

28
00:02:28,060 --> 00:02:34,750
preciso, pois isso usa Na caixa flexível internamente, você pode usar os itens de alinhamento para controlar o alinhamento ao longo do

29
00:02:34,810 --> 00:02:41,380
eixo transversal e configurá-lo para o centro, e isso agora deve garantir que os itens sejam centralizados novamente caso sejam menores e

30
00:02:41,380 --> 00:02:43,440
é isso que está acontecendo aqui.

31
00:02:43,510 --> 00:02:50,170
Portanto, com isso, você sabe como controlar e distribuir o conteúdo dentro de uma exibição

32
00:02:50,170 --> 00:02:58,660
de rolagem ou de uma lista em geral. Agora, e se você também quiser controlar a caixa flexível ao longo do eixo principal?

33
00:02:58,660 --> 00:03:06,520
Digamos que nossa lista aqui, na verdade, não deve começar logo abaixo desta caixa aqui com nossos controles, mas um pouco mais abaixo, deve

34
00:03:06,520 --> 00:03:11,620
começar na parte inferior da tela e depois crescer até o topo e, em seguida,

35
00:03:11,620 --> 00:03:14,500
só pode ser rolada quando atingir o topo.

36
00:03:14,520 --> 00:03:21,590
Isso também pode ser controlado com nosso estilo de lista, que é o estilo aplicado ao estilo do contêiner de conteúdo,

37
00:03:21,590 --> 00:03:27,350
portanto, com esse estilo, você também pode controlar isso adicionando justifyContent porque o justify content permite que

38
00:03:27,350 --> 00:03:33,440
você posicione o conteúdo ao longo do eixo principal da caixa flexível e O eixo principal do flexbox

39
00:03:33,440 --> 00:03:38,430
por padrão é o eixo vertical porque a direção padrão é a coluna.

40
00:03:38,600 --> 00:03:45,410
Então, aqui, agora vamos usar o flex end em vez do padrão, que é flex start e flex end, agora deve realmente mover os

41
00:03:45,410 --> 00:03:47,350
itens para o final da lista.

42
00:03:47,360 --> 00:03:48,740
Então, vamos ver se

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

44
00:03:50,570 --> 00:03:52,590
funciona, né, parece não funcionar, certo?

45
00:03:52,610 --> 00:03:59,670
O problema aqui é que a visualização de rolagem apenas aumenta essa visualização interna que é agrupada no final quando novos

46
00:03:59,670 --> 00:04:01,360
itens são adicionados, agora

47
00:04:01,370 --> 00:04:06,310
queremos que a visualização interna cresça automaticamente. Em uma visão normal,

48
00:04:06,320 --> 00:04:08,800
conseguiríamos isso adicionando o flex one.

49
00:04:08,990 --> 00:04:14,170
Então, vamos tentar isso aqui nesta lista de estilos que também adicionamos à exibição de rolagem.

50
00:04:14,180 --> 00:04:21,570
Se adicionarmos aqui, agora você vê que isso se comporta corretamente, começa aqui na parte inferior e agora vamos aumentar

51
00:04:21,600 --> 00:04:23,860
isso e espero que não

52
00:04:24,450 --> 00:04:32,870
resolvamos isso muito cedo e veja, podemos rolar. Então, isso realmente está crescendo e funciona exatamente da maneira que queremos. É rolável e geralmente funciona da

53
00:04:32,890 --> 00:04:39,000
maneira que queremos, mas você notará que na verdade não pode rolá-lo de forma

54
00:04:39,000 --> 00:04:45,420
que sempre veja o item mais recente. Você pode rolar para lá, mas depois ele volta a subir

55
00:04:45,420 --> 00:04:48,270
e provavelmente não é isso que queremos, no Android,

56
00:04:48,270 --> 00:04:50,370
também não funciona. Lá, se

57
00:04:50,370 --> 00:04:53,340
agora começarmos a adivinhar, você verá o mesmo

58
00:04:53,340 --> 00:04:59,110
comportamento, bem, se eu chegasse lá, a única diferença é que ele está quebrado por

59
00:04:59,140 --> 00:05:05,320
um motivo diferente, eu não consigo nem rolar. Portanto, o flex one realmente não funciona, o que você pode usar lá

60
00:05:05,320 --> 00:05:11,170
é algo que não usamos antes e que é o flex grow. Agora, o flex grow também garante que o

61
00:05:11,230 --> 00:05:17,230
item ao qual você adiciona isso cresça e ocupe o máximo de espaço possível, assim como o

62
00:05:17,230 --> 00:05:23,150
flex one, a diferença é que o flex grow funciona um pouco diferente internamente, é mais flexível

63
00:05:23,260 --> 00:05:26,250
que o flex. O Flex simplesmente diz

64
00:05:26,290 --> 00:05:32,050
que ocupa todo o espaço disponível em todas as direções possíveis, o flex grow instrui

65
00:05:32,050 --> 00:05:38,980
basicamente o contêiner a crescer, a ocupar o máximo de espaço possível e o fará, mas mantém o

66
00:05:38,980 --> 00:05:39,580
outro

67
00:05:39,780 --> 00:05:45,280
comportamento normalmente, neste caso da visualização de rolagem, onde é rolável e também pode

68
00:05:45,310 --> 00:05:47,300
exceder os limites da tela.

69
00:05:47,320 --> 00:05:53,080
Portanto, é um pouco mais flexível e você provavelmente não precisa disso muitas vezes em uma exibição normal, mas em

70
00:05:53,080 --> 00:05:54,720
uma exibição de rolagem, é exatamente

71
00:05:54,820 --> 00:06:00,340
o que precisamos e só estou mostrando isso aqui, porque esse é um caso especial que você apenas precisa

72
00:06:00,340 --> 00:06:01,680
sabe ou sobre o

73
00:06:01,760 --> 00:06:07,420
que você pode tropeçar e, normalmente, encontra soluções no estouro de pilha e assim por diante, aqui encontra-se neste curso

74
00:06:07,660 --> 00:06:12,520
porque é um cenário que você pode encontrar e, portanto, esperançosamente, você pode se lembrar dessa palestra

75
00:06:12,520 --> 00:06:14,140
e ver como resolver isso.

76
00:06:14,170 --> 00:06:20,410
Então eu adicionei flex grow a essa propriedade de lista e agora vamos tentar novamente. Aqui no iOS, se começarmos a

77
00:06:20,530 --> 00:06:30,520
adivinhar números aqui, agora você verá que eu posso realmente rolar de modo que o item mais recente fique visível e também posso rolar de

78
00:06:30,610 --> 00:06:33,750
modo que o item mais antigo fique visível,

79
00:06:33,760 --> 00:06:37,620
agora isso mostra o comportamento que queremos, obrigado flexionar crescer.

80
00:06:37,750 --> 00:06:41,480
E no Android, será o mesmo se iniciarmos um jogo

81
00:06:45,510 --> 00:06:52,140
lá, veja agora, também posso rolar isso aqui e posso ver o palpite mais recente e o palpite mais antigo.

82
00:06:52,200 --> 00:06:58,860
Portanto, agora isso está funcionando da maneira que deveria aqui no Android e iOS, e eu estava mostrando tudo isso de forma simples, para

83
00:06:59,070 --> 00:07:05,490
você conhecer esses padrões, esse estilo especial de contêiner de conteúdo na exibição de rolagem e também queria ter certeza de que

84
00:07:05,670 --> 00:07:09,960
você estava ciente de alguns dos problemas com os quais você pode se deparar quando

85
00:07:09,960 --> 00:07:15,180
começa a estilizar uma lista e quando deseja adicionar seu próprio layout, então existem alguns truques que podem

86
00:07:15,180 --> 00:07:18,510
ser muito úteis se você encontrar essa situação no seu aplicativo.