Para centralizar o conteúdo no meio, podemos usar uma técnica que já descrevi
anteriormente, estilo e especificamente, flexbox.
Então em nosso modal temos essa visão ou em nosso modal temos essa visão, essa é a nossa visão de
raiz, é o único elemento no
modal e então essa visão tem outros elementos filhos, mas esse é o único filho direto do nosso modal.
Lá, temos o estilo de contêiner de entrada que aplicamos e, atualmente, definimos uma direção
flexível de linha.
Agora é claro que poderíamos deixar isso, mas eu diria que no modal se apresentássemos em uma tela
inteira como essa, eu estou realmente bem com uma orientação vertical para que possamos ter a entrada e, abaixo disso, o botão.
Então, alterarei isso de volta para coluna ou, já que é o padrão, simplesmente exclua essa
direção flexível e agora quero centralizá-la horizontalmente e verticalmente e, para
isso, podemos definir o conteúdo justificado para centralizar aqui e alinhar itens ao centro, mas isso sozinho
não fará o truque.
Você pode ver se você abre o modal, ele ainda está no topo
e a razão para isso é
que o nosso contêiner de entrada, de modo que a visualização à qual estamos atribuindo esse estilo, por padrão, não
ocupa todo o espaço disponível nele pode entrar
na visão ao redor, então, neste caso, no modal. O modal teoricamente ocupa toda a altura e largura da tela,
mas a visualização simplesmente não ocupa todo o espaço disponível por
padrão, é assim
que funciona, essa é a configuração padrão.
Leva apenas o espaço que seus filhos exigem, então a entrada
de texto e o botão.
Então a visão tem essencialmente a altura da entrada de texto e botão
combinados e então também a largura do filho mais amplo neste caso, então da entrada de texto aqui e pelo jeito
aqui, o Android simplesmente não atualizou corretamente é por isso
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
estilo que você aplica à visão, neste caso
nosso estilo de contêiner de entrada aqui e definir flex para um aqui. Flex é uma propriedade que é usada em conjunto
com o flexbox e, como você aprendeu anteriormente neste módulo, nesta flexbox extra flex, você
pode controlar quanto espaço seus diferentes itens dentro de um flexbox ocupam e se é o único
item, simplesmente
garante que esse contêiner ocupará todo o espaço disponível.
Você também pode definir isso para flexionar dois, o valor exato não importa aqui se for o único
filho, mas você precisa definir flex para garantir que isso ocupe todo o espaço disponível.
Se você não fizer isso, ele ocupará tanto espaço quanto seus elementos filhos, se
você definir flex, ele ocupará tanto espaço quanto o elemento pai fornece, assim como
o elemento pai dessa view,
o modal neste caso, dá a visão.
Então, com flex um adicionado aqui, se você agora salvar isso, no iOS, você vê agora isso é bem centrado e também
ver isso no Android, o que você pode fazer é abrir o alternador de tarefas,
fechar este aplicativo aqui e
pressionar um aqui para reiniciar este aplicativo no Android, não
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
entrada que eu quero ter e para
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
Android está realmente tendo alguns problemas aqui com o meu modal, então vamos fechá-lo e ver
se isso parece
bom, sim, isso é bom.
Agora quero ter certeza de que, quando clicamos em adicionar aqui, agora fechamos o modal.