Au 12 - Mobile - React Native - Estilizando a lista de produtos - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos estilizar aqui a listagem de produtos né na aula passada nós comunicamos com backend e estão trazendo os dados né que estão sendo exibidos aqui em tela e agora a gente vai fazer aqui Uma estilização para criar e uma uma lista né fazer ali realmente a lista os elementos da mesma forma que a gente tem planejado lá no nosso XD Tá então vamos aqui pro código já vamos voltar para cá isso e aqui no XD né Nós temos aqui essa esse esse estilo né esse design aqui de lista que é o que nós vamos fazer nessa aula né é bem provável talvez eu divida essa aula em duas tá porque normalmente toma muito tempo nessa questão da estilização e a gente vai estar criando aqui esse cabeçalho da lista né e a lista em si onde nós listamos aí os produtos tá então eh dito isso aqui vamos aqui no nosso código eh no Que Nós criamos na aula passada né O que que eu fiz aqui eu adicionei um ícone de delete né um ícone ali para ser usado pra deleção eh e nas nas componentes que Nós criamos ou seja na product list na lista de produtos e no empty list que seria a componente que indica uma lista vazia eh eu eu criei os arquivos de Styles né os arquivos de estilos aí que na aula passada nós não tínhamos criados Então tá uma Style sheet vazia sendo exportada tá então com isso aqui feito Eh vamos começar aqui do Product list porque nós temos que fazer uma mudança aqui e grande né grande assim importante porque a listagem em si nós não vamos fazer dessa forma que está sendo feita com o vi e mapeando os nossos dados tá para fazer essa listagem nós vamos usar uma flat list Tá certo e a flatlist ela é uma forma é um é uma lista né Nativa que o react nos nos dá nos disponibiliza pra gente tá faz trabalhando com listagem de dados e dá pra gente bastante funcionalidade muito interessante um AP muito poderosa pra gente fazer diversas coisas e que que relaciona aí com dados consecutivos ou até listas é óbvio né porque ela é uma lista mas às vezes por exemplo Dando um exemplo aqui de sabe quando a gente abre um aplicativo a primeira vez e a gente tem ali um tutorial de uso alguns passos ali onde ele explica pra gente alguma coisa para ser feita a gente pode fazer aquilo usando flat list né onde cada vez que você vai clicando em next a gente usa um uma referência né para referenciar ali na api e conseguir e programaticamente né passar a flat list pro lado então a gente consegue rolar a lista via código e essa rolagem com animação tudo bem bem bonitinho a gente consegue trabalhar bastante com flatlist Enfim fazer várias outras coisas mas e aqui nesse caso a gente vai est usando ela então eu pesquisei aqui no Chrome né o react Native flatlist ele já me deu aqui a documentação oficial do react n deixa eu minimizar o app aqui a documentação oficial com todos os métodos com bastante exemplo declaração de de método referência aqui né das propriedades enfim tem muita coisa aqui muita coisa interessante para se dar uma olhada e nessa aula a gente vai estar usando né e baseado nessa nessa api aqui a nossa flatlist pra gente est criando aí essa listagem desses produtos Tá certo então voltando aqui no código né E nós vamos vamos manter essa View tá que é a view que seria o contêiner aí né a componente que tá por fora e aqui dentro da vi eu vou chamar aqui a f list tá importa lá do react Native ela é uma componente self close e tem aqui alguns duas propriedades que eu sou obrigado a passar tá vindo aqui na documentação nós temos aqui nessas que tem essa essa esse círculo vermelho na esquerda que seria o render item e o data Tá o que que é isso o que o que que é esse data esse data é uma lista de dados dos dados que eu vou exibir na lista eh uma rei de dados que eu vou mostrar na minha lista tá que é esse data que nós estamos recebendo que é uma lista de produtos tá e o render it é a função que vai renderizar o item pra gente tá então esse render it a gente pode pensar aqui no map como essa callback que é uma função que vai vai passar por cada item da lista e vai renderizar um componente retornar né um componente visual para ser mostrado em tela tá então o render item nós se a gente abre aqui aqui a declaração desse método ele é um list render item de de Um item de tesse que é um genérico que que vai ser basicamente o data que eu passo no nosso caso o render item ele é um list render item de e product né de produto esse product é a interface Que Nós criamos que descreve um produto tá então é uma lista né Essa lista esse list render item de uma de de produtos né que nós estamos mapeando e aqui o list render item ele ele é uma função né uma função callback que retorna um react Element tá E essa função ela recebe um info aqui nesse info a gente tem informações do do item que nós estamos eh renderizando que no caso é um objeto que é um produto né então é um pouco diferente aqui na na callback do Map mas a finalidade é a mesma porque no map eu já mapeio e pego um item né o item que é um e product nesse caso aqui tem aqui dentro um info né que nós vimos lá na documentação esse info se aqui no corpo da função ó eu digitar aqui info ponto ó lá nós temos index item E separators então a gente já pode fazer um destructor aqui nesse info para já extrair só o que eu quero nesse caso o que eu quero é só o item tá então nós usamos aqui né as chaves para fazer essa essa desestruturação basicamente é pegar do objeto só a propriedade que eu quero que é o item né que é um e product então aqui dentro eu posso fazer o que eu tô retornando aqui no meu no meu map né nesse caso aqui eu vou colocar explicitamente o return né aqui o Word aqui de retorno porque no render vou mover isso aqui para cima o texto com o item name e porque no render item Pode ser que a gente calcule alguma coisa antes de retornar calcular algum estilo calcular enfim a gente pode talvez a gente precise fazer alguma coisa aqui antes de retornar tá então esse data map eu vou apagar e vou deixar só a flatlist retornando esse item tá E e com isso vamos vir aqui no emulador e os itens estão aqui né não mudou nada eu vou até reiniciar o app aqui ó ó pra gente ver se vai dar algum erro ou não tava lá vazio depois de 2 segundos os itens aparecem tá então a FL list Tá OK tá funcionando tudo bem eh e aí dentro da flatlist nós nós vamos usar aqui uma propriedade que é o list header component tá o que é isso é basicamente eu vou passar uma componente nessa propriedade aqui e essa componente vai ser exibida como cabeçalho na parte superior da minha lista de dados tá então no nosso exemplo o que que seria esse header seria essa parte aqui ó que tá escrito o nome aí de stoque e preço Tá certo então o header seria isso vamos fazer aqui um exemplo dele é no list header component eu vou passar aqui uma View a view vazia e aqui eu vou passar um estilo em linha né pra gente ver essa View aí onde é que ela vai aparecer então no Style aqui eu vou passar um obeto background color vermelho né E uma e uma altura de 20 pixis e aí se eu salvo olha lá ó ess essa View né Essa minha View ficou ocupando aqui toda a parte superior da minha lista tá então nós vamos usar isso aqui para criar o cabeçário da nossa lista e o cabeçalho né já puxando aqui de de de todas essas componentes que Nós criamos o cabeçalho ele pode muito bem ser um componente tá então ao invés aqui de eu falar que o list header component é uma View que dentro vai ter é se gente volta aqui no XD né uma View que vai ter nome ID stock preço eu posso criar uma componente para isso e só passar aqui a referência para componente né então ao invés dessa View eu vou recortar ela eh eu vou ter um componente por exemplo eh Aqui nós temos estamos em product list né então product list header tá vou criar essa componente aqui e essa componente ela é específica da minha lista né Eu não vou usar ela em nenhum outro lugar então dentro de product list que product list já é uma componente né então dentro de product list eu vou criar uma pasta chamada components e aqui dentro eu vou criar aqui o o nosso header né nesse caso aqui o header como ele é simples Eu ao invés de eu criar uma pasta chamada product list header ou só header eu vou criar só um arquivo chamado header p tsx e aqui dentro eu vou ter a componente né visto que ela é uma componente bem simples Tá mas a gente poderia muito bem seguir o padrão vamos seguir o padrão tá vamos seguir um padrão então aqui dentro de compões vou criar uma pasta chamada header e dentro da pasta header eu vou criar um arquivo não é header PS x né vou renomear aqui para index tsx e aqui dentro eu vou ter a componente que vai chamar products list header né é uma função que retorna a view que nós copiamos e aqui no final Export default products list header e aqui eu só vou importar essa view do react Nate beleza criando aqui a componente e vou importar aqui na verdade eu vou na verdade eu vou tirar aqui o list header component Vou salvar sumiu né o nosso o botão superior aqui vermelho agora eu vou voltar aqui o list header component e aqui dentro nós temos o products list header tá importando aqui a componente mesmo eu passo a componente a referência direta né eu não preciso passar aqui dentro do do jsx né dentro das chaves aqui necessidade disso tá E aqui só vou salvar isso aqui e salvando apareceu lá de novo a nossa View vermelha Tá certo então é aqui dentro que eu vou criar esse meu header tá o cabeçalho Então esse cabeçalho Ele é simples né a gente olha aqui no XD nós temos aqui nome ID sto e preço com o fundo um pouco cinza né e e as bordas arredondadas Tá então não tem segredo não vamos vir aqui eu vou apagar essey esse estilo Não na verdade é vou apagar esse estilo que tá aqui em linha tá vou deixar só a view e dentro dessa View eu vou ter os textos né a tag text Então vou importar aqui o text né do react Nate E os textos serão o quê nome ID estoque e preço tá então aqui nome é aqui é hashid isso #id eh estoque e preço Beleza então salvando isso aqui ó já apareceu aqui nome ID estoque preço e a gente vai ter que estil ele né agora para ele ficar do jeito que a gente precisa lá que a gente tem aqui no XD tá então eu vou criar aqui no header vou criar um novo arquivo arquivo de Style styles. ts né aqui eu vou copiar aqui o Style sheet só para nós não perdermos mais muito tempo né E aqui dentro do dentro do da sty sheet eu vou ter alguns estilos né que vai ter um estilo contêiner em si ou seja PR View e para cada texto eu vou ter um estilo específico tá porque a gente vai definir Flex a gente vai trabalhar com flexbox aqui né E nós falamos de flexbox nas aulas anteriores mas aqui eu vou est dando uma pincelada aí pra gente relembrar o que que é esse conceito da flexbox mas aqui na vi já vou criar os estilos aqui então Style vai receber Styles P container eu vou copiar esse Style aqui tá porque a gente tá com tempo vai ter vai precisar de muito tempo né coner name esse aqui é o ID esse aqui é o stoque o stoque tem que serem inglês né em inglês stock é isso mesmo sim e Opa Price tá container nome ID stock e preço né nome ID stoque preço é o texto e o contêiner é a view externa então aqui no arquivo de Styles eu vou criar isso aqui esses estilos aqui também então vou ter um container vou ter o name ID stock e Price certo simplesmente criei os estilos e simplesmente é criei os estilos aqui na tela e criei os estilos lá no arquivo de St não tem nada aqui dentro os objetos estão todos vazios e agora a gente começa a estilizar de verdade isso aqui tá então no contêiner né começando pelo contêiner o que que eu vou fazer que Vou definir né um Flex Direction Row tá e o que que é ó lá e quando eu defino né os itens já começam se posicionar em formato de linha né um ao lado do outro e por padrão eles se posicionam em formato de coluna né um acima do outro mas voltando aqui um pouco no no flexbox né O que que é essa flexbox a ideia de flexbox né a ideia de contêiner flexível então é um contêiner que ele vai eh se expandir ou se contrair Dependendo da forma e de valores que nós passamos e esses valores eles são sempre relativos ao espaço vazio que nós temos no aqui no Canvas né enquanto a gente tá criando essa essas componentes Então se por exemplo eu tenho duas nesse caso aqui tá eu tenho essas esses nomes né esses textos só que a minha View ela tá ocupando essa linha inteira né Essa horizontal inteira então eu tenho todo esse espaço aqui em branco e quando a gente tá usando o conta in flexível eu posso definir valores para para pros meus elementos né ou seja pro nome pro texto né nome pro texto ID pro texto stock e pro texto Price preço né é o quão o quanto que eu quero de espaço que eles ocupem desse espaço em branco tá então o quanto eu quero que eles expandam tá então a gente consegue definir isso aí e aí esses itens eles vão começar a se expandir e para ocupar todo todo esse espaço em branco ou parcela desse espaço em branco que a gente vai definindo tá e também uma das propriedades que a gente tem é a direção do controlar a direção desse Flex né se eu quero que ele que ele se direcione em coluna ou em linha nós podemos também controlar o alinhamento né então se eu quero que esses itens se alinhem no centro se eu quero que ele se alinhem no na esquerda na direita eh também tanto na horizontal quanto na vertical tá então a gente consegue controlar tudo isso aí tá então por exemplo aqui no Flex Direction Row se eu passar por exemplo um justify content Center e salvar Olha lá os os itens se alinharam ao centro no centro ou a ao centro né então a gente consegue controlar e aqui no justify cont nós temos bastante eh valores Como por exemplo o Space bit TN ele vai colocar um um espaço igual Entre esses elementos tá então se eu salvo isso aqui olha lá ó todos eles se alinharam com o espaço igual entre eles tá então eu tenho Space between Space around que é com espaço em volta né ou seja não só no entre eles mas também por volta deles enfim tem muita opção que a gente pode estar definindo muita possibilidade paraa gente tá trabalhando aqui com o Flex Direction nesse caso aqui o justify conta eu vou deixar Space between tá para eles se posicionarem dessa forma aqui E além disso a gente vai precisar também da cor de fundo né do background color então o background color S definir aqui o nosso querido vermelho né PR ocupando a linha inteira e só que a gente vai ter que pegar a cor aqui do XD né que é esse cinza então esse cinza é esse ex decimal aqui tá e com esse ex decimal eu vou ter que definir no nosso arquivo de tema né então vou digitar aqui te para ele importar o arquivo de tema e só para mim abrir aqui o arquivo de tema mesmo né Nós estamos usando o tema Light e aqui dentro eu vou definir por exemplo uma propriedade chamada list header n a cor do cabe a cor de fundo do cabeçada da lista que é igual esse ex decimal que eu colei aqui eu vou ter que definir na interface também né porque nós estamos usando interface aí para fazer a tipagem do arquivo de tema né então vou colar aqui o list header background que é uma string só pra gente ter o controle aí meio que forçar né ambos os arquivos de tema tanto de Light quanto de Dark a terem as mesmas propriedades as mesmas cores definidas tá então list header background tá aqui então team eu vou digitar né team ponto e list header background e ele vai colocar o cinza aí na cor de fundo Desse nosso contêiner Tá certo Além disso O que que eu vou fazer é o que que nós precisamos definir aqui né além da cor do de fundo se a gente olha aqui e volta aqui e olha a cor da borda também é diferente tá é um Cinza Mais Escuro Então a gente vai ter que pegar a cor dessa borda também e aqui no XD como é que eu vou pegar isso na verdade eu copiei eu tinha copiado a cor da borda Tá então vamos vamos aqui V copiei agora a cor de fundo e aqui no meu tema eu vou definir aqui o list header background e o no caso list border tá então list border vai ser a cor da borda da lista né que não é só do header vai ser também do corpo da lista então aqui eu vou ter um list border que é na verdade esse a cor do background tá trocado né a cor do background é a cor da borda e a cor da borda é a cor do background salvando aqui agora sim ele ficou da forma correta Tá então vamos vamos continuar aqui na estilização que vai ficar mais claro aí [Música] essa essa alteração tá background color definido agora nós vamos definir o border ã no caso a largura da borda né que eu vou definir aqui uns dois pixis um pouco mais grosso isso dois pixis e o border hum color né a cor da borda tá em team pon border color ele vai aplicar essa cor aqui no contêiner Tá além disso O que que a gente precisa também o raio né o raio da borda se eu ven aqui no nosso XD essa borda o raio da borda nesse caso aqui desse contêiner o raio da borda ele se aplica somente nos cantos superiores esquerdos e direitos né no canto inferior não tem não não tá arredondado na verdade aqui no ex ditar né porque foi o foi o formato que foi utilizado aqui para criar mas lá no dentro do app e eu não vou eu não vou usar esse raio esse raio em todos os cantos tá só vou usar no canto superior esquerdo e direito tá e se eu olho aqui qual raio é esse ele é tem o valor de vamos lá border radius cara Sumiu aqui achei achei são 15 né 15 pixis no caso eu peguei aqui do contêiner de baixo né mas tá lá 15 pixels Então vamos voltar aqui e o border radius no caso é só o superior esquerdo e direito né então border eh top left radius é 15 e border top right né à direita radius 15 também tá salvando isso aqui vamos ver aqui no app e aqui para ficar melhor de visualizar Opa para ficar melhor de visualizar vou dar um zoom aqui ó é na verdade não ficou bom nada né eu vou adicionar aqui um p na verdade teria que ser uma margem né uma margem de 20 pixels e a gente tá com um problema né tá mostrando nada não está exibindo depois que a gente definiu o raio né ou não depois que eu definir a cor da borda Na verdade eu acho que a cor dessa borda que tá bem clara vamos vir aqui no Styles desfazer isso aqui vou comentar a cor da borda e olha lá a o formato que ela está né agora sim ficou bem nítido aí pra gente ver não tá legal então para melhorar isso aqui ao invés de adicionar uma margem eu vou adicionar um pading de 20 20 é muito né na verdade não vamos voltar aqui o zoom ã é muito sim no caso eu vou passar só 10 isso agora sim ficou bom é porque com esse pedin aqui a gente quando a gente criar a parte inferior aqui vai ficar show né vai ficar Ok e provavelmente a gente vai aumentar também o o a fonte né desses desses textos aqui ou não talvez a gente deixe assim também vamos ver aí já quando a gente fori desenvolvendo como vai ficar essa essa interface tá então com isso aqui feito vamos voltar aqui no vs code e agora a gente vai aplicar esses estilos aqui para cada item do meu do meu cabeçalho tá e basicamente o que a gente vai fazer é definir o Flex tá então quando eu defino aqui essa propriedade Flex eh essa essa propriedade que eu falei lá que nós usamos para controlar o quão o quanto de espaço eu quero que esse do espaço vazio né Eu quero que este elemento ocupe Então olha lá ó no nome eu passei o Flex um e o a o texto name né Deixa eu tirar aqui essa ferramenta o texto name o texto nome né ocupou todo o ele ele empurrou né todos os outros os outros textos paraa direita ou seja ele se esticou ele tá ocupando todo esse espaço aqui da direita se eu colocar aqui um um background color vermelho olha lá tá ocupando Todo o espaço vazio tá e se eu venho aqui no ID por exemplo e passo um Flex 2 e o background color eu vou definir aqui um Blue se eu faço ISO aqui olha lá o nosso ID né o texto ID ele vai ocupar duas vezes mais do que o nome tá E foi exatamente o que ele fez aqui então essa essa esse controle usando flexbox É bem interessante da gente fazer porque no nosso caso aqui a gente volta aqui no exd e alguns Campos ocupam mais espaços né Por exemplo o nome ele vai ocupar mais espaço né do que o ID por exemplo certo e o stock também vai ocupar menos espaço já o preço ele precisa ocupar mais espaço né porque são são tipos de dado que naturalmente Eles já ocupam mais espaço né então a gente esse controle conflex é interessante pra gente conseguir eh brincar com esses valores aí e e ajustar o elemento na tela e em questão dos valores do Flex eu gosto eu particularmente eu gosto muito de usar na escala entre zero e 1 Porque isso me remete a porcentagem tá então se eu passar aqui o o name é zero . o Flex dele né E aqui o ID É 0.

2 eu sei que eles vão ocupar o o o nome vai ocupar 10% do espaço em branco e o ID vai ocupar 20% desse espo em branco tá e você pode subir essa escada aqui para 100 né então definir o Flex 10 e o Flex 20 né tanto faz eu vou manter aqui o que eu já uso diariamente que é entre zero e um entre zero e um né E a gente vai definindo esses valores aqui tá vou tirar o background color que eu coloquei só pra gente visualizar aqui e no caso desses caras aqui eu já tenho esses valores pré-definidos tá aqui no meu exemplo então só vou copiar e colar aqui tá eh nesse caso aqui eu tô com um estilo a mais que é esse estilo Dell tá Dell que vai ser basicamente uma coluna nova que eu vou criar para adicionar o botão de deletar né se a gente olha aqui no XD nós temos esses ícones aqui né os três pontos mas no exemplo nosso a gente vai colocar uma lixeirinha né que faz bem mais sentido né que E aí essa lixeirinha eu vou adicionar uma coluna nova para ela né E aí por isso eu vou ter que definir um Flex para ela também tá que é 0. 05 ou seja 5% só dois passo em branco tá então com esses valores aqui do Flex definidos eh os itens já se se ajustaram aqui né o nome ID estoque e preço e vale Vale tomar vale a gente a gente pode na verdade a gente tem que falar aqui sobre que é esses valores do Flex tá esses valores que a gente definindo em flex aqui eles terão que ser compartilhados com a lista também né a lista que seria a a lista em si né nesse caso aqui nós estamos fazer só o cabeçalho mas esses valores de Flex a gente precisa compartilhar eles eles com a lista né porque a gente tem que ter esse cuidado né de definir os mesmos valores para não ficar desalinhado o cabeçalho com a lista em si tá então uma coisa que a gente pode fazer é copiar esse objeto aqui do jeito que tá agora com os valores de Flex definido e vamos fazer o seguinte produ list tem o arquivo Styles né que é esse aqui que eu acabei de abrir e aqui eu tô dando um Export default nos meus estilos padrão tá só que antes Aqui eu posso criar um objeto então conste Eu Vou Chamar esse objeto aqui de list item Flex Flex values tá vamos vamos dar um nome bem ves aqui dar um nome bem completo aqui pra gente não se confundir e vou colar aquele meu objeto na verdade eu tenho que abrir Chaves e colar esse cara tá então o que qual que é a ideia aqui eu vou criar um objeto Onde Eu Vou definir esses valores de Flex e vou usar esse objeto na minha estilização de forma que eu vou centralizar a definição desses valores e quando eu quiser mudar os valores eu só mudo em um lugar e vai se repetir esse esse valor né vai se refletir tanto no cabeç quanto na lista tá então o o tipo do dado aqui vai ser mais simples né não é um do jeito que tá aqui né o objeto com outros objetos dentro vai ser só um objeto com chave valor né então o nome vai ter um Flex de 0. 35 tá o ID vai ter um Flex de 0.

2 o stock vai ter um Flex de 0. 2 Price 0. 2 e o Dell aqui 0.