1
00:00:02,460 --> 00:00:06,390
Obviamente, essa tela agora não é tão útil e, portanto,

2
00:00:06,390 --> 00:00:13,500
vou agora para o texto que usei como manequim e substituí-lo por, digamos, iniciar um novo jogo, algo assim

3
00:00:13,500 --> 00:00:21,480
e abaixo disso, quero ter um área de entrada com um leve sombreamento; portanto, este visual típico de cartão talvez você

4
00:00:21,540 --> 00:00:27,420
conheça em alguns aplicativos e sites onde há uma caixa com um leve sombreamento por trás,

5
00:00:27,420 --> 00:00:29,220
talvez alguns cantos arredondados.

6
00:00:29,400 --> 00:00:36,570
Eu quero recriar isso aqui, então adicionarei uma visão aqui, uma visão, porque, novamente, esse é um elemento muito flexível, podemos

7
00:00:36,600 --> 00:00:42,120
aplicar muitos estilos lá, podemos adicionar nossa sombra e nossos cantos arredondados e, então, manter

8
00:00:42,150 --> 00:00:43,460
nosso conteúdo nessa

9
00:00:43,470 --> 00:00:49,080
exibição, então é ótimo ter um estilo geral do contêiner e agora dentro dessa exibição. Quero

10
00:00:49,080 --> 00:00:56,910
ter um texto onde dizemos selecionar um número, por exemplo, e onde também queremos ter um campo de texto em que os

11
00:00:57,150 --> 00:00:58,580
usuários pode inserir algo.

12
00:00:58,590 --> 00:00:59,310
Então, adicionarei

13
00:00:59,430 --> 00:01:06,300
um componente de entrada de texto, que é o componente interno em que os usuários podem usar o teclado para inserir um

14
00:01:06,300 --> 00:01:11,970
valor e, aqui, eles devem inserir um número. Vamos configurar isso e estilizar isso em

15
00:01:11,970 --> 00:01:17,820
um segundo, por enquanto vou colocá-lo assim e abaixo disso, quero ter dois botões próximos um

16
00:01:17,850 --> 00:01:18,810
do outro

17
00:01:18,810 --> 00:01:25,190
e isso é importante, próximos um do outro, não abaixo de cada um outro que nos permite redefinir

18
00:01:25,190 --> 00:01:32,510
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

19
00:01:32,660 --> 00:01:37,520
lado do outro, enquanto esses itens são posicionados um sobre o outro, porque, se eu adicionasse apenas dois botões

20
00:01:37,560 --> 00:01:42,650
aqui, precisaria alterar a visualização da direção flexível para exibi-los um ao outro, mas o texto e a entrada de

21
00:01:42,680 --> 00:01:45,420
texto também estariam sentados um ao lado do outro.

22
00:01:45,500 --> 00:01:51,950
Agora, adicionarei uma vista aqui para que, nessa vista, a vista circundante, este, este e este componente da vista

23
00:01:52,250 --> 00:01:54,010
fiquem acima um do

24
00:01:54,020 --> 00:02:00,590
outro, no eixo vertical, mas dentro desta vista, agora também posso garantir que os itens aí ficam sentados um ao

25
00:02:00,590 --> 00:02:05,270
lado do outro, então no eixo horizontal e é isso que eu quero aqui.

26
00:02:05,450 --> 00:02:11,480
Então, importarei o botão interno, que é um dos componentes da visualização que se ajusta automaticamente à

27
00:02:11,510 --> 00:02:17,540
plataforma subjacente. Mais tarde, em um módulo separado, você aprenderá como descobrir manualmente manualmente em qual plataforma

28
00:02:17,630 --> 00:02:21,990
está executando o ajuste a aparência do seu aplicativo para isso.

29
00:02:22,220 --> 00:02:29,450
Aqui, vamos usar o botão interno e atribuir ao primeiro um título de redefinição e o segundo, o segundo

30
00:02:29,510 --> 00:02:32,450
botão aqui um título de confirmação e, em

31
00:02:32,450 --> 00:02:39,740
seguida, aqui, o onPress no momento não fará nada, então isso é apenas uma função vazia, apenas adicionando-a para que

32
00:02:39,740 --> 00:02:42,000
já tenhamos o suporte, adicionaremos a

33
00:02:42,050 --> 00:02:43,710
lógica mais tarde e,

34
00:02:43,850 --> 00:02:46,140
por enquanto, teremos os botões aqui.

35
00:02:46,250 --> 00:02:51,330
Agora o estilo estará ausente, como eu disse, o botão deve estar ao lado do outro.

36
00:02:51,410 --> 00:02:57,170
Portanto, darei a essa visualização aqui que contém um estilo de botões apontando para

37
00:02:57,170 --> 00:02:59,060
o objeto de

38
00:02:59,060 --> 00:03:02,370
estilos e, digamos, um contêiner de botão, esse

39
00:03:02,520 --> 00:03:10,930
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

40
00:03:10,960 --> 00:03:14,930
styles e eu usarei o recipiente de entrada digamos, esse

41
00:03:15,040 --> 00:03:20,850
nome também depende de você e aqui, eu quero estilizá-lo como um título especial, talvez

42
00:03:20,950 --> 00:03:27,090
com um tamanho de fonte maior, então aqui, vou atribuir um estilo de título, digamos.

43
00:03:27,300 --> 00:03:36,900
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

44
00:03:37,080 --> 00:03:43,330
agora podemos começar a adicionar alguns estilos lá. Agora, para o título, novamente eu quero

45
00:03:43,330 --> 00:03:47,330
definir o tamanho da fonte, então vou definir o tamanho

46
00:03:47,410 --> 00:03:58,750
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

47
00:03:58,750 --> 00:04:09,750
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

48
00:04:09,990 --> 00:04:17,050
entrada em um segundo, o contêiner de botões terá uma direção flexível da linha, o padrão

49
00:04:17,060 --> 00:04:19,780
é coluna, mas agora quero que

50
00:04:19,790 --> 00:04:23,790
os itens fiquem próximos um do outro, portanto, precisamos

51
00:04:23,790 --> 00:04:25,870
usar a linha aqui.

52
00:04:25,870 --> 00:04:31,420
Eu quero definir uma largura aqui, porque se não definirmos uma largura no contêiner de botões, seria tão

53
00:04:31,450 --> 00:04:34,960
largo quanto os dois botões estiverem juntos. Em vez disso, quero

54
00:04:34,960 --> 00:04:41,050
usar a largura do pai, então dessa vista aqui e, em seguida, posicione os botões dentro dessa visualização. Quero fazer

55
00:04:41,050 --> 00:04:41,880
o oposto.

56
00:04:41,890 --> 00:04:47,140
Não estilize a visualização de acordo com os botões, mas posicione os botões de acordo com

57
00:04:47,140 --> 00:04:47,970
a visualização.

58
00:04:48,160 --> 00:04:55,150
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

59
00:04:55,150 --> 00:04:55,590
o

60
00:04:55,690 --> 00:05:01,630
justifyContent para posicioná-los ao longo do eixo principal que, para a linha de direção flexível, é da esquerda para

61
00:05:01,630 --> 00:05:07,930
a direita e lá vou escolher o espaço entre, de modo que os botões fiquem nas bordas esquerda e direita

62
00:05:07,930 --> 00:05:15,000
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

63
00:05:15,000 --> 00:05:21,660
algum espaçamento para a esquerda e direita dentro da nossa vista, talvez 15 para que os botões não fiquem diretamente

64
00:05:21,660 --> 00:05:24,920
nas bordas da esquerda e da direita, mas há alguns

65
00:05:25,020 --> 00:05:29,420
espaçando à esquerda e à direita. Ok, então com isso,

66
00:05:29,560 --> 00:05:35,240
se salvarmos isso, vemos o que eu não sei sobre você,

67
00:05:35,660 --> 00:05:39,860
mas que não parece tão bom, não é?

68
00:05:39,860 --> 00:05:45,650
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 é

69
00:05:45,650 --> 00:05:48,340
por isso que os estilos parecem um pouco diferentes.

70
00:05:49,040 --> 00:05:56,000
Portanto, devemos dar um estilo ao contêiner de entrada. Quero adicionar uma largura e agora

71
00:05:56,090 --> 00:06:02,690
você pode usar uma largura codificada de 300 pixels ou usar largura e porcentagem.

72
00:06:02,990 --> 00:06:11,570
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

73
00:06:11,570 --> 00:06:17,120
pequeno, é um pouco de capacidade de resposta que já adiciono aqui, se o o dispositivo seria

74
00:06:17,120 --> 00:06:23,300
muito pequeno, garantimos que nossa largura não exceda 80%. E então eu quero alinhar os itens no

75
00:06:23,300 --> 00:06:25,840
centro, lembre-se de que o contêiner

76
00:06:25,850 --> 00:06:29,600
de entrada é uma visualização, portanto, ele usa flexbox, usa o

77
00:06:29,600 --> 00:06:35,420
padrão da coluna de direção flexível e, portanto, com alinhar o centro do item, posicionamos os

78
00:06:35,630 --> 00:06:39,240
itens no centro no cruze o eixo da esquerda para

79
00:06:39,260 --> 00:06:44,500
a direita, para centralizar os itens horizontalmente. Agora, com isso, agora parece muito melhor, não

80
00:06:44,500 --> 00:06:46,140
podemos realmente ver a

81
00:06:46,180 --> 00:06:48,780
entrada, mas essa é a coisa antiga, certo?

82
00:06:48,970 --> 00:06:53,710
Teremos que modelá-lo para que possamos realmente vê-lo. No entanto, vemos os botões e

83
00:06:53,710 --> 00:06:57,710
podemos ver que nosso layout e estilo gerais estão tomando forma.

84
00:06:58,090 --> 00:07:01,440
Ainda assim, ainda não estou 100% feliz com a aparência disso.