Obviamente, essa tela agora não é tão útil e, portanto,
vou agora para o texto que usei como manequim e substituí-lo por, digamos, iniciar um novo jogo, algo assim
e abaixo disso, quero ter um área de entrada com um leve sombreamento; portanto, este visual típico de cartão talvez você
conheça em alguns aplicativos e sites onde há uma caixa com um leve sombreamento por trás,
talvez alguns cantos arredondados.
Eu quero recriar isso aqui, então adicionarei uma visão aqui, uma visão, porque, novamente, esse é um elemento muito flexível, podemos
aplicar muitos estilos lá, podemos adicionar nossa sombra e nossos cantos arredondados e, então, manter
nosso conteúdo nessa
exibição, então é ótimo ter um estilo geral do contêiner e agora dentro dessa exibição. Quero
ter um texto onde dizemos selecionar um número, por exemplo, e onde também queremos ter um campo de texto em que os
usuários pode inserir algo.
Então, adicionarei
um componente de entrada de texto, que é o componente interno em que os usuários podem usar o teclado para inserir um
valor e, aqui, eles devem inserir um número. Vamos configurar isso e estilizar isso em
um segundo, por enquanto vou colocá-lo assim e abaixo disso, quero ter dois botões próximos um
do outro
e isso é importante, próximos um do outro, não abaixo de cada um outro que nos permite redefinir
a entrada e escolher uma nova ou confirmar a escolhida. Portanto, precisamos de uma visualização aqui, porque isso nos permite posicionar itens um ao
lado do outro, enquanto esses itens são posicionados um sobre o outro, porque, se eu adicionasse apenas dois botões
aqui, precisaria alterar a visualização da direção flexível para exibi-los um ao outro, mas o texto e a entrada de
texto também estariam sentados um ao lado do outro.
Agora, adicionarei uma vista aqui para que, nessa vista, a vista circundante, este, este e este componente da vista
fiquem acima um do
outro, no eixo vertical, mas dentro desta vista, agora também posso garantir que os itens aí ficam sentados um ao
lado do outro, então no eixo horizontal e é isso que eu quero aqui.
Então, importarei o botão interno, que é um dos componentes da visualização que se ajusta automaticamente à
plataforma subjacente. Mais tarde, em um módulo separado, você aprenderá como descobrir manualmente manualmente em qual plataforma
está executando o ajuste a aparência do seu aplicativo para isso.
Aqui, vamos usar o botão interno e atribuir ao primeiro um título de redefinição e o segundo, o segundo
botão aqui um título de confirmação e, em
seguida, aqui, o onPress no momento não fará nada, então isso é apenas uma função vazia, apenas adicionando-a para que
já tenhamos o suporte, adicionaremos a
lógica mais tarde e,
por enquanto, teremos os botões aqui.
Agora o estilo estará ausente, como eu disse, o botão deve estar ao lado do outro.
Portanto, darei a essa visualização aqui que contém um estilo de botões apontando para
o objeto de
estilos e, digamos, um contêiner de botão, esse
nome sempre depende de você e também quero que essa visualização que contém minhas entradas seja style aqui, referindo-se ao objeto
styles e eu usarei o recipiente de entrada digamos, esse
nome também depende de você e aqui, eu quero estilizá-lo como um título especial, talvez
com um tamanho de fonte maior, então aqui, vou atribuir um estilo de título, digamos.
Agora podemos ir lá em baixo na nossa folha de estilo e adicionar o título, adicionar o contêiner de entrada e também o contêiner de botão e
agora podemos começar a adicionar alguns estilos lá. Agora, para o título, novamente eu quero
definir o tamanho da fonte, então vou definir o tamanho
da fonte assim, defina-o como digamos 20 e talvez também adicione algum espaçamento no eixo vertical com a margem vertical de digamos 10, 10 como isso e
sempre lembre-se, a margem vertical basicamente substitui a margem inferior e a margem superior e agora no contêiner de botões e voltarei ao contêiner de
entrada em um segundo, o contêiner de botões terá uma direção flexível da linha, o padrão
é coluna, mas agora quero que
os itens fiquem próximos um do outro, portanto, precisamos
usar a linha aqui.
Eu quero definir uma largura aqui, porque se não definirmos uma largura no contêiner de botões, seria tão
largo quanto os dois botões estiverem juntos. Em vez disso, quero
usar a largura do pai, então dessa vista aqui e, em seguida, posicione os botões dentro dessa visualização. Quero fazer
o oposto.
Não estilize a visualização de acordo com os botões, mas posicione os botões de acordo com
a visualização.
Então, eu vou dar ao contêiner de botões essa visualização e largura explícita aqui e agora para posicionar os botões, podemos usar
o
justifyContent para posicioná-los ao longo do eixo principal que, para a linha de direção flexível, é da esquerda para
a direita e lá vou escolher o espaço entre, de modo que os botões fiquem nas bordas esquerda e direita
desta linha e distribua todo o espaço livre disponível entre eles. Adicione também um pouco de preenchimento horizontal aqui, para que tenhamos
algum espaçamento para a esquerda e direita dentro da nossa vista, talvez 15 para que os botões não fiquem diretamente
nas bordas da esquerda e da direita, mas há alguns
espaçando à esquerda e à direita. Ok, então com isso,
se salvarmos isso, vemos o que eu não sei sobre você,
mas que não parece tão bom, não é?
Agora, o problema é que o contêiner de entrada ainda não possui estilos. O contêiner de entrada contém todas as entradas, e é
por isso que os estilos parecem um pouco diferentes.
Portanto, devemos dar um estilo ao contêiner de entrada. Quero adicionar uma largura e agora
você pode usar uma largura codificada de 300 pixels ou usar largura e porcentagem.
Agora, adicionarei uma largura aqui de 300, mas também uma largura máxima de 80%, para que tenhamos 300 pixels de largura, mas se o dispositivo for muito
pequeno, é um pouco de capacidade de resposta que já adiciono aqui, se o o dispositivo seria
muito pequeno, garantimos que nossa largura não exceda 80%. E então eu quero alinhar os itens no
centro, lembre-se de que o contêiner
de entrada é uma visualização, portanto, ele usa flexbox, usa o
padrão da coluna de direção flexível e, portanto, com alinhar o centro do item, posicionamos os
itens no centro no cruze o eixo da esquerda para
a direita, para centralizar os itens horizontalmente. Agora, com isso, agora parece muito melhor, não
podemos realmente ver a
entrada, mas essa é a coisa antiga, certo?
Teremos que modelá-lo para que possamos realmente vê-lo. No entanto, vemos os botões e
podemos ver que nosso layout e estilo gerais estão tomando forma.
Ainda assim, ainda não estou 100% feliz com a aparência disso.