1 00:00:02,230 --> 00:00:08,100 Nesta palestra, quero mergulhar um pouco mais no flexbox, especialmente em relação a como você o usa nos aplicativos React 2 00:00:08,110 --> 00:00:08,690 Native. 3 00:00:08,710 --> 00:00:12,310 Se você já sabe tudo sobre isso, é claro que você pode pular esta palestra. 4 00:00:12,340 --> 00:00:14,920 Então, para isso, eu preparei um aplicativo fictício simples e, claro, você encontra isso 5 00:00:14,920 --> 00:00:20,420 em anexo, é um aplicativo nativo React normal construído com a expo e no aplicativo. arquivo js aqui, o que eu tenho 6 00:00:20,460 --> 00:00:26,890 no final é apenas uma visão com três views lá onde cada view então tem um texto com 7 00:00:26,890 --> 00:00:29,990 text um, dois, três, isso simplesmente cria algumas 8 00:00:30,010 --> 00:00:36,310 caixas com cores diferentes - vermelho, azul e verde e agora usaremos o flexbox para mover essas caixas 9 00:00:36,310 --> 00:00:41,950 para que você possa ter uma ideia de como o flexbox funciona porque é muito importante. 10 00:00:42,240 --> 00:00:43,240 Agora as 11 00:00:43,660 --> 00:00:49,120 primeiras coisas, por padrão, todas as visualizações no React Native, mesmo se você não 12 00:00:49,120 --> 00:00:55,410 atribuir estilos especiais, usa flexbox e isso é diferente da web, por exemplo, se você tiver um 13 00:00:55,420 --> 00:01:01,370 div que seria o equivalente a um tipo de visualização, não use o flexbox por padrão. 14 00:01:01,450 --> 00:01:08,260 Em React Native, toda visão, por padrão, organiza seus filhos com a ajuda desse flexbox, flexbox é 15 00:01:08,350 --> 00:01:15,490 simplesmente um termo, é simplesmente um conceito de CSS que é tudo sobre organizar elementos filhos em um 16 00:01:15,520 --> 00:01:17,440 espaço unidimensional, então aqui 17 00:01:17,440 --> 00:01:21,990 por exemplo, em uma coluna. Esse também é outro padrão, 18 00:01:21,990 --> 00:01:29,340 não só toda visualização usa o flexbox, mas também por padrão organiza os filhos em uma coluna, 19 00:01:29,340 --> 00:01:33,020 de cima para baixo. Isso também é uma diferença para a 20 00:01:33,020 --> 00:01:37,350 web e eu não quero enfatizar muito essas diferenças, porque é claro que você não precisa ser um 21 00:01:37,350 --> 00:01:42,400 desenvolvedor web para construir aplicativos React Native, mas eu acho que muitas pessoas conhecem o desenvolvimento web, Conheço o flexbox do 22 00:01:42,400 --> 00:01:47,400 CSS e, portanto, faz sentido também falar sobre as diferenças. Então, na web quando você usa o flexbox, 23 00:01:47,400 --> 00:01:48,840 não apenas ele 24 00:01:48,840 --> 00:01:51,220 não é ativado por padrão, além disso, 25 00:01:51,240 --> 00:01:56,820 se você ativá-lo, o padrão é organizar todos os elementos filhos em uma linha e aqui, o 26 00:01:56,820 --> 00:01:59,010 padrão é organizá-los em um coluna. 27 00:01:59,010 --> 00:02:05,910 Você pode alterar esse padrão, portanto, neste caso, na visualização que contém minhas caixas, adicionando a direção flexível aqui 28 00:02:05,910 --> 00:02:12,960 e configurando para a linha, por exemplo, agora você verá que essas três caixas estão organizadas em uma linha da 29 00:02:12,960 --> 00:02:16,560 esquerda para a direita. Agora, além de linha e coluna, 30 00:02:16,560 --> 00:02:19,250 você também tem reverso de linha e coluna reversa e 31 00:02:19,260 --> 00:02:21,720 isso simplesmente também faz o que o nome implica. 32 00:02:21,720 --> 00:02:29,010 Agora nós ainda temos uma linha, mas o primeiro elemento, a caixa vermelha, na verdade, está à direita e não à esquerda mais, então 33 00:02:29,010 --> 00:02:30,820 isso também é algo que 34 00:02:30,840 --> 00:02:36,210 você pode fazer, deixe-me voltar para a linha embora. Então essa é a primeira coisa que você pode fazer. 35 00:02:36,210 --> 00:02:42,750 Outra coisa importante sobre o flexbox é como os elementos filhos são dimensionados, aqui eu dei a 36 00:02:42,810 --> 00:02:47,040 cada elemento filho uma largura e uma altura de 100. 37 00:02:47,070 --> 00:02:54,660 Agora, se removêssemos essa coisa de largura e altura em cada elemento filho, veríamos que agora temos uma linha muito 38 00:02:54,660 --> 00:03:01,890 pequena aqui, porque agora cada caixa é tão grande quanto a criança exige que seja e tão alta quanto 39 00:03:01,890 --> 00:03:05,700 seu filho. exige que seja, então cada caixa aqui 40 00:03:05,700 --> 00:03:11,180 que contém um número é tão larga e alta quanto o número que contém. 41 00:03:11,340 --> 00:03:18,180 Agora você também pode mudar isso com o contêiner flexbox circundante. Vamos dar uma largura de digamos 300 pixels 42 00:03:18,330 --> 00:03:22,740 ou 80% da largura pai, então neste caso, já que 43 00:03:22,740 --> 00:03:28,950 é o elemento raiz, da largura do dispositivo e vamos dar uma altura de 44 00:03:29,020 --> 00:03:30,230 digamos 300. 45 00:03:30,480 --> 00:03:36,720 Se fizermos isso e agora realmente importante, estou fazendo isso na visão que contém todas essas caixas, 46 00:03:36,720 --> 00:03:39,380 não estou fazendo nas caixas em si. 47 00:03:39,480 --> 00:03:45,050 Então, se nós atribuirmos essa largura e altura na caixa ao redor, você verá algo 48 00:03:45,150 --> 00:03:48,250 interessante, a altura é assumida para todos os 49 00:03:48,270 --> 00:03:54,810 elementos, agora todas as visualizações no flexbox assumem a altura do pai, a largura não tem impacto aqui. 50 00:03:54,870 --> 00:03:59,510 Esse também é um comportamento padrão que você tem aqui, obviamente, já que não mudamos nada. 51 00:03:59,760 --> 00:04:06,840 O comportamento padrão aqui, de fato, é que os elementos filhos em um flexbox, portanto, nesta 52 00:04:06,850 --> 00:04:15,360 visão externa, estão organizados de tal forma que eles se alinham ao longo do eixo cruzado por meio do alongamento. 53 00:04:15,490 --> 00:04:20,510 Ok, isso foi um monte de termos, o que isso significa? Agora, ao trabalhar 54 00:04:20,530 --> 00:04:29,290 com o flexbox, temos dois eixos importantes. O eixo principal depende da sua direção de flexão, para uma linha que temos aqui, 55 00:04:29,350 --> 00:04:37,690 linha de direção de flexão, o eixo principal é da esquerda para a direita. Para linha reversa, seria direita para a esquerda, para coluna, seria de cima para 56 00:04:37,690 --> 00:04:42,570 baixo e para coluna reversa, seria de baixo para cima, então esse é o eixo principal 57 00:04:42,580 --> 00:04:44,270 e então você também tem 58 00:04:44,620 --> 00:04:48,630 um eixo transversal e isso é simplesmente o oposto do eixo principal. 59 00:04:48,640 --> 00:04:56,110 Assim, para uma linha em que o eixo principal é da esquerda para a direita, o eixo transversal seria de cima para baixo. Se o eixo principal for da direita para a 60 00:04:56,110 --> 00:05:01,900 esquerda, o que seria o caso da linha inversa, o eixo transversal seria de baixo 61 00:05:01,900 --> 00:05:03,100 para cima. 62 00:05:03,340 --> 00:05:06,940 Ok, então esse é o eixo principal e o conceito de eixo cruzado. 63 00:05:06,940 --> 00:05:13,060 Agora você pode organizar seus elementos filhos, portanto, nessa visualização em que temos as três caixas como elementos filho, 64 00:05:13,360 --> 00:05:20,170 você pode organizar esses elementos filho ao longo desse eixo. Você usa o conteúdo justificado para organizar os 65 00:05:20,200 --> 00:05:27,760 elementos ao longo do eixo principal e alinha os itens para organizar os elementos ao redor do eixo transversal. 66 00:05:27,760 --> 00:05:31,040 Agora você vê os valores que você obteve para justificar o conteúdo aqui, se você adicionar 67 00:05:31,090 --> 00:05:37,230 essas citações ou se colocar o cursor nele e atingir o espaço de controle. Você vê que pode centralizar elementos, pode 68 00:05:37,230 --> 00:05:44,040 posicioná-los no final ou no início desse contêiner ou pode adicionar algum espaço entre eles, 69 00:05:44,040 --> 00:05:45,270 por exemplo, 70 00:05:45,300 --> 00:05:52,500 se usarmos espaço entre aqui e usarmos alinhar o centro do item, as coisas serão alteradas. 71 00:05:52,500 --> 00:05:57,490 Agora você verá a largura do contêiner ao redor, cada caixa ainda é 72 00:05:57,540 --> 00:06:03,360 bem pequena, mas eles estão divididos ou são distribuídos pela largura do contêiner pai e não 73 00:06:03,360 --> 00:06:09,570 estão mais ocupando a altura, porque ao longo da cruz eixo, estamos alinhando-os com itens de alinhamento 74 00:06:09,570 --> 00:06:12,960 e lá, eu definir isso para o centro. 75 00:06:13,020 --> 00:06:19,620 O padrão aqui é alongar e se eu configurá-lo de volta para esticar, então, sem surpresa, eles esticam para 76 00:06:19,620 --> 00:06:20,960 toda a altura. 77 00:06:20,970 --> 00:06:26,490 Agora, se você quiser garantir que eles ocupem a largura disponível, não é possível definir o alongamento aqui 78 00:06:26,490 --> 00:06:32,820 para justificar o conteúdo, que é o principal veículo de posicionamento do eixo, portanto, não é possível definir o alongamento aqui. 79 00:06:32,980 --> 00:06:35,880 Então, o que você pode fazer a respeito disso? 80 00:06:35,890 --> 00:06:40,780 Bem, isso é algo que você configura agora em cada item filho. 81 00:06:40,810 --> 00:06:50,290 Você pode dizer a um item filho quanto espaço ele deve tirar do espaço que ele está potencialmente recebendo. Esticar aqui é uma espécie de caso especial, lá você 82 00:06:50,290 --> 00:06:54,220 configura isso no item pai, normalmente você configura 83 00:06:54,220 --> 00:06:56,640 isso no item filho. 84 00:06:56,680 --> 00:07:02,200 Então, por exemplo, se eu definir isso para o centro agora, para que o pai não 85 00:07:02,200 --> 00:07:08,950 diga ao filho quanto espaço ele deve ocupar, então poderemos controlar totalmente o espaço que uma criança leva indo para o 86 00:07:08,950 --> 00:07:17,410 estilo filho e aí você pode adicionar flex , a propriedade flex. A propriedade flex é aplicada a itens que estão dentro de um flexbox, de 87 00:07:17,410 --> 00:07:19,730 modo que estão dentro de uma visão, 88 00:07:19,810 --> 00:07:25,660 neste caso, aqui e que pode ser uma visão em si, mas que também poderia ser outro componente como 89 00:07:25,660 --> 00:07:27,150 um texto, por exemplo. 90 00:07:27,160 --> 00:07:31,320 Então agora, aqui, você pode adicionar flex e você pode definir isso para um valor de um 91 00:07:31,330 --> 00:07:35,940 por exemplo, então flex precisa ser um número. Se você definir isso como um, o 92 00:07:35,950 --> 00:07:44,050 que você verá é que agora o container vermelho onde eu defini o flex para 1 leva toda a largura disponível, ele pode ficar 93 00:07:44,110 --> 00:07:50,440 tão grande que deixa espaço suficiente para o container azul e verde para que eles pode espremer seu 94 00:07:50,620 --> 00:07:52,470 conteúdo no flexbox circundante. 95 00:07:52,480 --> 00:07:58,360 Agora não podemos ver os limites do contêiner ao redor, mas os limites seriam essencialmente onde o item 96 00:07:58,600 --> 00:08:03,060 vermelho começa e o item verde e assim no eixo horizontal aqui. 97 00:08:04,720 --> 00:08:11,020 Então agora flex um garante que o item vermelho fica tão grande quanto possível, por 98 00:08:11,170 --> 00:08:17,140 isso ocupa o máximo de espaço possível. Por padrão, as exibições ocupam apenas o espaço exigido pelos 99 00:08:17,140 --> 00:08:17,690 elementos 100 00:08:17,710 --> 00:08:24,040 filhos, portanto, como esse caractere é necessário, mas com um flexível, você altera isso e agora ocupa o espaço ao longo 101 00:08:24,040 --> 00:08:25,140 do eixo principal, 102 00:08:25,150 --> 00:08:29,140 portanto, ao longo da largura, pegue. Para o eixo cruzado, mais uma vez que 103 00:08:29,140 --> 00:08:34,310 é um caso especial, você tem que fazer isso no pai. Para o eixo principal e como temos 104 00:08:34,360 --> 00:08:38,790 linha aqui, o eixo principal é um eixo horizontal da esquerda para a direita, você 105 00:08:38,800 --> 00:08:41,520 faz isso com a propriedade flex em um filho. 106 00:08:42,700 --> 00:08:48,550 Agora, é claro, você também pode adicionar flex a outros elementos filhos, assim, em segundo lugar, para o container 107 00:08:48,550 --> 00:08:50,260 azul com os dois, 108 00:08:50,260 --> 00:08:52,420 você também pode adicionar um flex lá. 109 00:08:52,420 --> 00:08:56,690 Então agora eu tenho um flex no container vermelho e flexo 110 00:08:56,710 --> 00:09:03,790 um no container azul e o que acontece agora é que ambos pegam o espaço livre disponível e entre essas 111 00:09:03,790 --> 00:09:08,870 duas caixas, o espaço é distribuído uniformemente e é isso que esse número aqui indica. 112 00:09:08,930 --> 00:09:11,210 Esse número é um número 113 00:09:11,210 --> 00:09:18,350 relativo, todos os itens no mesmo flexbox, com a propriedade flex distribuir o espaço disponível considerando o 114 00:09:18,410 --> 00:09:23,130 número atribuído aqui e esses números são relativos um ao outro. 115 00:09:23,140 --> 00:09:29,800 Então, se eu der ao flexionador azul dois aqui, então isso significa que, do espaço disponível que você 116 00:09:29,950 --> 00:09:36,100 tem naquele contêiner vizinho, depois de deduzir o espaço que cada elemento precisa para espremer seu 117 00:09:36,100 --> 00:09:36,840 conteúdo, 118 00:09:36,970 --> 00:09:42,480 o contêiner azul ocupará o dobro do espaço disponível. este aqui porque temos flex 119 00:09:42,490 --> 00:09:43,760 um, aqui temos 120 00:09:43,810 --> 00:09:50,560 flex dois, se tivéssemos flex três aqui, então isso levaria três quintos do espaço livre disponível porque temos 121 00:09:50,560 --> 00:09:52,150 três mais dois, então 122 00:09:52,210 --> 00:09:58,300 temos 5 segmentos disponíveis por assim dizer e aqui o container vermelho levaria 3 segmentos, o 123 00:09:58,300 --> 00:09:59,950 container azul levaria 2 segmentos. 124 00:09:59,950 --> 00:10:05,950 Se temos 1 e 2, então temos três segmentos disponíveis e o azul leva dois 125 00:10:06,070 --> 00:10:13,510 deles, vermelho leva um, então você sempre soma esses números flexíveis e então distribui ou isso é feito automaticamente, 126 00:10:13,510 --> 00:10:17,680 claro, mas então o espaço disponível é distribuído adequadamente. 127 00:10:17,680 --> 00:10:22,660 Então, agora, aqui, veremos que o contêiner azul é duas vezes maior que o vermelho ou que ocupa 128 00:10:22,660 --> 00:10:25,090 o dobro do espaço livre que o vermelho. 129 00:10:25,090 --> 00:10:27,090 Então, é assim que você 130 00:10:27,130 --> 00:10:33,760 pode trabalhar com flex, você pode organizar como os itens são posicionados com a direção flexível, com justificar o conteúdo e 131 00:10:33,790 --> 00:10:39,370 alinhar itens, e você também pode fazer seus itens crescerem e encolherem com a ajuda do flex. 132 00:10:39,430 --> 00:10:44,490 Então agora é uma breve introdução ao flexbox no React Native, como eu disse 133 00:10:44,560 --> 00:10:51,070 inspirado pelo Flexbox para CSS, então se você soubesse disso, tudo o que eu expliquei aqui provavelmente não é 134 00:10:51,070 --> 00:10:52,280 novidade para você. 135 00:10:52,450 --> 00:10:54,610 Trabalharemos com o flexbox ao longo deste curso, 136 00:10:54,610 --> 00:10:58,900 para que as coisas também se tornem mais claras e trabalhemos muito com ele e 137 00:10:58,930 --> 00:11:05,170 você verá como é possível criar interfaces de usuário bonitas com o flexbox, o flexbox no final é a ferramenta no React 138 00:11:05,170 --> 00:11:10,570 Nativo para estruturar seu conteúdo em uma página, para organizar seu conteúdo e você normalmente trabalhará com muitas visualizações, 139 00:11:10,570 --> 00:11:15,190 as quais você também aninhará umas nas outras, de modo que você possa posicionar os elementos da 140 00:11:15,190 --> 00:11:16,720 maneira que quiser, claro, 141 00:11:16,840 --> 00:11:21,680 e isso também é importante, você não basta ter uma visão em seu aplicativo que usa flexbox, 142 00:11:21,730 --> 00:11:26,050 você poderia ter outra visão lá que também usa flexbox e, na verdade, como eu 143 00:11:26,050 --> 00:11:31,570 mencionei, todas as visualizações por padrão usam flexbox e você pode aninhar essas visualizações umas nas outras para que você 144 00:11:31,600 --> 00:11:35,070 posiciona tudo do jeito que você quiser e você também verá isso 145 00:11:35,140 --> 00:11:41,200 neste módulo e, na verdade, eu já estou fazendo isso aqui. Em meus pontos de vista aqui que estão na vista 146 00:11:41,200 --> 00:11:47,710 ao redor, então minhas caixas aqui, eu também uso justificar o conteúdo e alinhar itens para centralizar meus números nessas caixas, 147 00:11:47,710 --> 00:11:54,070 de modo que 1, 2 e 3 estão centralizados lá na horizontal e vertical e isso funciona porque temos o flexbox 148 00:11:54,070 --> 00:12:00,700 ativado por padrão e não podemos desativá-lo pelo caminho e, portanto, eu apenas uso essas duas propriedades aqui para alinhar meu conteúdo 149 00:12:00,700 --> 00:12:08,320 dessa visão ao longo do eixo principal e transversal e aqui, já que não defini nenhum flex especial direção para essa vista, o eixo principal 150 00:12:08,320 --> 00:12:14,170 é de cima para baixo, porque a direção de flexão padrão é coluna e o eixo cruzado é 151 00:12:14,530 --> 00:12:16,420 da esquerda para a direita. 152 00:12:16,420 --> 00:12:17,440 Isso é apenas uma nota lateral.