1
00:00:02,560 --> 00:00:08,680
Para centralizar o conteúdo no meio, podemos usar uma técnica que já descrevi

2
00:00:08,710 --> 00:00:11,500
anteriormente, estilo e especificamente, flexbox.

3
00:00:11,500 --> 00:00:17,470
Então em nosso modal temos essa visão ou em nosso modal temos essa visão, essa é a nossa visão de

4
00:00:17,500 --> 00:00:19,400
raiz, é o único elemento no

5
00:00:19,420 --> 00:00:25,090
modal e então essa visão tem outros elementos filhos, mas esse é o único filho direto do nosso modal.

6
00:00:25,180 --> 00:00:29,310
Lá, temos o estilo de contêiner de entrada que aplicamos e, atualmente, definimos uma direção

7
00:00:29,350 --> 00:00:30,490
flexível de linha.

8
00:00:30,490 --> 00:00:35,170
Agora é claro que poderíamos deixar isso, mas eu diria que no modal se apresentássemos em uma tela

9
00:00:35,620 --> 00:00:41,230
inteira como essa, eu estou realmente bem com uma orientação vertical para que possamos ter a entrada e, abaixo disso, o botão.

10
00:00:41,610 --> 00:00:48,250
Então, alterarei isso de volta para coluna ou, já que é o padrão, simplesmente exclua essa

11
00:00:48,250 --> 00:00:52,580
direção flexível e agora quero centralizá-la horizontalmente e verticalmente e, para

12
00:00:52,810 --> 00:00:59,480
isso, podemos definir o conteúdo justificado para centralizar aqui e alinhar itens ao centro, mas isso sozinho

13
00:00:59,680 --> 00:01:01,690
não fará o truque.

14
00:01:01,780 --> 00:01:05,710
Você pode ver se você abre o modal, ele ainda está no topo

15
00:01:05,800 --> 00:01:07,920
e a razão para isso é

16
00:01:07,930 --> 00:01:14,080
que o nosso contêiner de entrada, de modo que a visualização à qual estamos atribuindo esse estilo, por padrão, não

17
00:01:14,080 --> 00:01:16,720
ocupa todo o espaço disponível nele pode entrar

18
00:01:16,720 --> 00:01:22,450
na visão ao redor, então, neste caso, no modal. O modal teoricamente ocupa toda a altura e largura da tela,

19
00:01:22,480 --> 00:01:25,480
mas a visualização simplesmente não ocupa todo o espaço disponível por

20
00:01:25,480 --> 00:01:26,560
padrão, é assim

21
00:01:26,560 --> 00:01:28,630
que funciona, essa é a configuração padrão.

22
00:01:28,630 --> 00:01:31,900
Leva apenas o espaço que seus filhos exigem, então a entrada

23
00:01:31,900 --> 00:01:33,590
de texto e o botão.

24
00:01:33,730 --> 00:01:38,830
Então a visão tem essencialmente a altura da entrada de texto e botão

25
00:01:38,980 --> 00:01:47,420
combinados e então também a largura do filho mais amplo neste caso, então da entrada de texto aqui e pelo jeito

26
00:01:47,420 --> 00:01:51,940
aqui, o Android simplesmente não atualizou corretamente é por isso

27
00:01:51,940 --> 00:02:02,010
que você vê isso saída estranha aqui, você pode ignorar isso por enquanto. Então, para fazer com que a visão ocupe todo o espaço disponível aqui, você pode simplesmente ir para o

28
00:02:02,010 --> 00:02:04,320
estilo que você aplica à visão, neste caso

29
00:02:04,320 --> 00:02:11,670
nosso estilo de contêiner de entrada aqui e definir flex para um aqui. Flex é uma propriedade que é usada em conjunto

30
00:02:12,120 --> 00:02:18,270
com o flexbox e, como você aprendeu anteriormente neste módulo, nesta flexbox extra flex, você

31
00:02:18,480 --> 00:02:25,140
pode controlar quanto espaço seus diferentes itens dentro de um flexbox ocupam e se é o único

32
00:02:25,140 --> 00:02:26,430
item, simplesmente

33
00:02:26,430 --> 00:02:29,970
garante que esse contêiner ocupará todo o espaço disponível.

34
00:02:29,970 --> 00:02:34,980
Você também pode definir isso para flexionar dois, o valor exato não importa aqui se for o único

35
00:02:34,980 --> 00:02:39,570
filho, mas você precisa definir flex para garantir que isso ocupe todo o espaço disponível.

36
00:02:39,600 --> 00:02:44,160
Se você não fizer isso, ele ocupará tanto espaço quanto seus elementos filhos, se

37
00:02:44,280 --> 00:02:48,850
você definir flex, ele ocupará tanto espaço quanto o elemento pai fornece, assim como

38
00:02:48,900 --> 00:02:50,720
o elemento pai dessa view,

39
00:02:50,730 --> 00:02:52,990
o modal neste caso, dá a visão.

40
00:02:53,340 --> 00:03:00,650
Então, com flex um adicionado aqui, se você agora salvar isso, no iOS, você vê agora isso é bem centrado e também

41
00:03:00,670 --> 00:03:05,860
ver isso no Android, o que você pode fazer é abrir o alternador de tarefas,

42
00:03:06,070 --> 00:03:08,210
fechar este aplicativo aqui e

43
00:03:08,320 --> 00:03:11,890
pressionar um aqui para reiniciar este aplicativo no Android, não

44
00:03:11,890 --> 00:03:19,970
gosta do modal como parece e agora aqui, você também vê isso. Agora ajuste minúsculo é um pouco de espaçamento entre o botão e a

45
00:03:20,000 --> 00:03:22,140
entrada que eu quero ter e para

46
00:03:22,250 --> 00:03:30,530
isso, eu vou para a entrada e adiciono uma parte inferior da margem de 10 aqui mas com isso, estou muito feliz com isso novamente, infelizmente o

47
00:03:30,530 --> 00:03:35,380
Android está realmente tendo alguns problemas aqui com o meu modal, então vamos fechá-lo e ver

48
00:03:39,120 --> 00:03:40,430
se isso parece

49
00:03:40,440 --> 00:03:42,000
bom, sim, isso é bom.

50
00:03:42,000 --> 00:03:47,430
Agora quero ter certeza de que, quando clicamos em adicionar aqui, agora fechamos o modal.