1 00:00:02,130 --> 00:00:03,280 Agora, e 2 00:00:03,280 --> 00:00:07,130 o estilo, e esses botões? Agora, para esses botões, 3 00:00:07,130 --> 00:00:10,600 você pode perceber que agora tem um comportamento estranho se 4 00:00:10,610 --> 00:00:18,600 o tiver gravado de volta ao modo retrato, também aqui no Android. Por outro lado, se mudarmos algo e desfazermos isso apenas 5 00:00:18,690 --> 00:00:24,000 para que o aplicativo reinicie e iniciemos no modo retrato, você verá que parece bom, 6 00:00:24,000 --> 00:00:28,240 mas agora, se formos para o modo paisagem, parecerá ruim novamente. 7 00:00:28,260 --> 00:00:36,060 Então, basicamente, a largura dos nossos botões é registrada quando o aplicativo é iniciado e não se ajusta quando o tamanho da tela 8 00:00:36,060 --> 00:00:41,670 muda e, é claro, muda quando giramos o dispositivo porque a largura e a altura são trocadas, 9 00:00:41,670 --> 00:00:42,320 portanto, 10 00:00:42,330 --> 00:00:47,280 temos mais largura disponível se está no modo paisagem do que no modo retrato. 11 00:00:47,280 --> 00:00:53,730 O problema é que, atualmente, na tela inicial do jogo, quando definimos a largura dos nossos botões, 12 00:00:53,730 --> 00:00:59,970 usamos as dimensões get e isso e isso é muito importante para ter em mente, isso só 13 00:00:59,970 --> 00:01:02,970 é calculado quando o aplicativo é iniciado. 14 00:01:02,970 --> 00:01:08,220 Portanto, quando o aplicativo é iniciado pela primeira vez, ele analisa a largura disponível e, se inicia 15 00:01:08,220 --> 00:01:08,910 no modo 16 00:01:08,910 --> 00:01:13,980 retrato, é a largura do modo retrato, se inicia no modo paisagem, é a largura 17 00:01:13,980 --> 00:01:20,390 do modo paisagem e faz o login e quando você gira o dispositivo e, em seguida, o gira, isso não recalcula. 18 00:01:20,550 --> 00:01:25,970 Agora é claro que você gostaria que isso fosse recalculado e existe uma solução simples para isso. 19 00:01:26,100 --> 00:01:33,530 Se você tem uma largura ou altura, qualquer coisa que obtiver de dimensões que respeitem as 20 00:01:33,570 --> 00:01:41,430 alterações de orientação, deve ser recalculado quando a orientação mudar, então você não deve usar as dimensões 21 00:01:41,430 --> 00:01:50,250 de largura lá em baixo na folha de estilo, mas sim gerenciar a largura ou qualquer propriedade que seja alterada 22 00:01:50,570 --> 00:01:57,230 dinamicamente e que deva renderizar novamente a interface do usuário quando mudar de estado. 23 00:01:57,230 --> 00:02:00,960 Portanto, aqui na string do jogo inicial, 24 00:02:01,130 --> 00:02:11,470 já temos useState, agora também podemos gerenciar a largura de nosso botão aqui, definir a largura do botão com useState e 25 00:02:11,500 --> 00:02:18,290 inicializá-lo para dimensões, obter a largura da janela dividida por quatro, que é o 26 00:02:18,300 --> 00:02:21,220 padrão com o qual comecei. 27 00:02:21,330 --> 00:02:27,660 Agora você pode configurar um ouvinte aqui nas dimensões, em vez de usar get, chamando ouvinte de evento add e ouvir 28 00:02:28,020 --> 00:02:32,640 o evento de alteração que é acionado sempre que as dimensões mudam, o que geralmente 29 00:02:32,640 --> 00:02:35,000 ocorre quando o usuário gira o dispositivo. 30 00:02:35,010 --> 00:02:43,950 Então, aqui, podemos configurar uma função, atualizar o layout, por exemplo, que é uma função na qual chamo de largura do botão de configuração e defino novamente 31 00:02:43,950 --> 00:02:50,760 como minha largura aqui, mas a largura das dimensões será diferente com base na largura da tela quando girarmos ela e 32 00:02:50,760 --> 00:02:52,470 é essa função que 33 00:02:52,470 --> 00:02:58,020 eu quero chamar aqui, então é o layout de atualização que eu quero chamar aqui sem parênteses 34 00:02:58,020 --> 00:03:02,430 aqui porque nós apenas queremos apontar para essa função para que ela seja 35 00:03:02,460 --> 00:03:07,530 chamada quando as dimensões mudarem e isso garantirá que isso é executado novamente sempre que 36 00:03:07,830 --> 00:03:11,160 nossas dimensões mudam e, portanto, esse componente será renderizado novamente. 37 00:03:11,160 --> 00:03:16,100 Agora só precisamos garantir que usamos esse botão recalculado dinamicamente com o estado aqui. 38 00:03:16,230 --> 00:03:20,130 Podemos fazer isso usando estilos embutidos em vez de um objeto de folha de estilo. 39 00:03:20,130 --> 00:03:25,770 Agora, se você tiver outros estilos configurados para o botão que não dependem das dimensões, é possível deixá-los 40 00:03:25,770 --> 00:03:28,170 aqui na folha de estilos, é claro, 41 00:03:28,170 --> 00:03:32,910 neste caso, eu não tenho isso, então vou comentar isso e você pode mesclar isso 42 00:03:32,910 --> 00:03:36,120 com alguns estilos embutidos. Aqui, como não temos outros 43 00:03:36,120 --> 00:03:41,550 estilos padrão, substituirei esse objeto da folha de estilo para o qual apontamos com um objeto de estilo embutido, 44 00:03:41,550 --> 00:03:47,070 onde defino a largura igual à largura do botão e faça o mesmo, é claro, no meu segundo botão e, 45 00:03:47,130 --> 00:03:51,390 com isso, nós agora temos um estilo que muda sempre que giramos o dispositivo. 46 00:03:51,390 --> 00:03:55,550 Portanto, se salvarmos isso, você verá que agora parece bom, 47 00:03:55,550 --> 00:04:00,350 não importa como alternamos isso, também no Android, porque isso é renderizado novamente. 48 00:04:00,570 --> 00:04:07,050 Agora, uma observação importante aqui, no momento, estou configurando vários ouvintes de eventos aqui, sempre adiciono um novo ouvinte 49 00:04:07,050 --> 00:04:11,670 de eventos sempre que esse componente é renderizado novamente e não é isso que 50 00:04:11,670 --> 00:04:12,500 eu quero 51 00:04:12,720 --> 00:04:19,320 fazer e podemos usar efeito que também está embutido no React e que você deve estar ciente de ter 52 00:04:19,410 --> 00:04:23,540 um código que executamos sempre que nosso componente é renderizado novamente. 53 00:04:23,620 --> 00:04:31,020 Então agora eu posso usar o efeito use aqui e a função que eu quero executar em cada re-renderização é uma função 54 00:04:31,020 --> 00:04:36,210 que, no final, cria essa função de layout de atualização aqui e adiciona meu ouvinte 55 00:04:36,270 --> 00:04:41,580 de evento, então eu vou cortá-lo e adicioná-lo aqui na função de efeito de uso 56 00:04:41,580 --> 00:04:46,950 e, se retornarmos algo aqui em efeito de uso, essa é a nossa função de limpeza 57 00:04:46,950 --> 00:04:54,940 que é executada imediatamente antes do efeito de uso ser executado e ali. Quero limpar meu ouvinte porque aqui posso chamar dimensões remover alteração 58 00:04:54,950 --> 00:04:57,900 de ouvinte de evento para atualizar layout. 59 00:04:57,900 --> 00:05:02,840 Portanto, agora limpamos isso e configuramos um novo quando nosso componente é renderizado novamente, limpamos o antigo, configuramos 60 00:05:02,840 --> 00:05:06,610 um novo e, portanto, sempre temos apenas um ouvinte de evento em execução. 61 00:05:06,770 --> 00:05:13,350 Se fizermos assim, isso é simplesmente mais limpo e, portanto, se agora salvarmos isso e voltarmos, teremos o mesmo 62 00:05:13,350 --> 00:05:19,650 comportamento de antes, mas agora de maneira limpa, utilizando useState e use effect e, mais importante, os 63 00:05:19,950 --> 00:05:26,370 recursos de escuta de eventos do a API de dimensões que permite não apenas definir dimensões uma vez, 64 00:05:26,610 --> 00:05:29,040 mas recalculá-las quando elas são alteradas.