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

[Música] fala pessoal jancer aqui o vídeo de hoje é uma continuação né ali do nosso da estilização da nossa lista né a criação da listagem ali dos produtos na verdade a listagem já está sendo feita né nós só vamos aqui mesmo e trabalhar um pouco na questão do da estilização né para deixar da forma que nós temos planejado lá no nosso XD tá então sem perder muito tempo já vamos vir aqui pro nosso código tá porque que a gente o ponto que a gente parou na aula passada né o visual da lista tá esse aqui

nós ainda temos que resolver algumas coisas aqui e a gente já vai começar falando sobre essas bordas aqui ó as bordas do cabeçalho e da lista porque tá tá tendo essa diferença né porque se a gente pensar se a gente olhar aqui na estrutura e a nossa FL list ela está dentro de uma View né tá dentro de um contêiner e a flatlist tá renderizando os itens e a flatlist também tem o cabeçalho Então esse cabeçalho ele tá dentro do nosso contêiner da lista né E aí por conta disso a gente tá tendo essa essa

diferença das bordas né a borda do contêiner não é a mesma da borda do nosso item aqui que está sendo renderizado do do item não né do do cabeçalho né então para resolver isso a gente vai ter que meio que escolher qual contêiner que a gente vai trabalhar e na verdade que é que a gente não tem muita escolha né porque o que o que vai acontecer é que Opa Deixa eu voltar aqui no app Não é esse é no Expo isso eh para resolver isso aqui nós vamos ter que usar o contêiner externo tá

para para ter essas bordas e por volta do cabeçalho e por volta dos itens da lista e no nosso cabeçalho a única coisa que a gente vai definir é a margem inferior tá que é essa linha horizontal aqui que divide o cabeçalho da lista tá então lá no nosso cabeçário né no rer ele tem um contêiner né o contêiner do cabeçário onde a gente tá definindo essas bordas dele e eu lembro até que a gente fez a questão da das bordas superior né a gente definiu aqui na esquerda e na direita o raio dessas bordas

mas nesse caso aqui a gente não vai e usar usar essas bordas superiores né só vai definir essa borda inferior então aqui a borda já tá com a largura de dois eu vou definir aqui um border na verdade não é o border wid 2 né que seria um border borom wid Ou seja a largura da borda inferior é de dois pixis e olha lá ó já atualizou a nossa lista dando um zoom aqui ela já tá pegando o formato né Eh tá com esse problema aqui que cortou a borda ã a gente vai ter que

procurar onde é que está sendo aplicado isso mas é vamos investigar o porque que ficou assim mas olha já já tá ok né a gente nós só temos uma uma linha de uma borda né que é a borda externa aqui por volta da lista e aqui no nosso cabeçalho Nós só estamos definindo essa borda inferior para para provar isso aqui ó vamos fazer o seguinte Vamos definir a cor dessa borda vermelha né E olha lá somente essa parte inferior aqui do meu cabeçalho que ficou vermelho tá E esse problema que nós estamos tendo aqui da

da lista cortando na verdade não é o algum raio que tá perdido aí que algum raio de borda né que tá perdido aí no código e é basicamente que como eu tô falando que o meu cabeçalho ele só tem a borda inferior na nos outros cantos dele né o border radius né não border Radi mas o border wid né a gente só tem a largura de borda embaixo nas laterais em cima não ele tá o o próprio cabeçalho né Tá como tá sem borda ele tá saindo por fora e tá ficando por cima desse border

radius que que a gente definiu no contêiner né no contêiner da lista e por isso que tá branco né que na verdade que não é que tem tem uma borda uma outra borda que tá cortando essa borda minha na verdade é que o header o cabeçalho que tá por cima dessa borda e para provar ao invés de eu definir aqui um border borom widgit eu vou definir só um border widgit e olha lá ó vou dar um zoom aqui ó é bem nessa parte que tá a borda vermelha que está cortando né se eu voltar

aqui o border borom Olha lá então para resolver isso aqui é só a gente voltar o border radius é no caso border top left radius né de 15 pixs e o border e radius de 15 piis também E aí salvando isso eu adiciono o raio da borda no cabeçalho E aí ele para de cortar né Sai de cima da borda que a gente definiu no contêiner tá essa cor da borda vermelha a gente não vai deixar depois a gente volta aqui definindo a cor dessa borda Tá certo então com isso aqui ah resolvemos o problema

da borda né e agora vamos dar uma olhada aqui no XD né que o que que a gente tem nós temos a cor da borda na verdade ela é um cinza né e o cabeçalho em si tem uma cor de fundo e a gente definiu essas cores na aula passada né que é esse nosso tema aqui tem P bordercolor né Deixa eu ver aqui o que que a gente definiu hum a tipagem do te aqui tem o tema Light né Deixa eu só abrir ele aqui vamos tirar o emulador nós definimos esse border color não

né é o list border isso e o list header background exatamente esses dois Tons de Cinza aqui que nós definimos na aula passada né então aqui no cabeçário no estilo né a cor da borda não é te P list border certo e o contêiner a cor da borda e o background background já tá definido ali em cima né Pera aí que tem coisa errada aqui vamos ver aqui no app deixa eu dar um zoom aqui na verdade a cor tá ok né Eu acho que o Tom Desse nosso dess L head background que tá muito

claro né não tá contrastando bem com o resto da aplicação deixa eu colocar aqui um um preto ter certeza que tá sendo isso tá sendo aplicada e inclusive né Tem um essa essa borda essa partezinha que ficou em branco aqui que a borda não pegando existe cálculo matemático que a gente faz para descobrir qual o número da borda que eu tenho que passar nesses casos aqui que nós temos borda externa e borda interna para que as duas fiquem totalmente coladas né uma na outra mas e isso isso não vai ver o caso agora a gente

vai est só trazendo mais complexidade pra aula o que não é o foco no momento Tá então vamos deixar desse jeito que tá aqui tá Por mais que o contraste que tá pouco mas vamos manter assim pra gente não ter que ficar se batendo muito aqui com essa questão dessas cores tá então Vamos definir aqui o list border na no nosso product list né na lista de produto ou seja o contêiner né que é onde nós estamos usando essa borda a borda do contêiner eu vou passar aqui para ele o border color vai tá em

te ponto list border né e salvando aqui toda a borda da lista vai ficar nessa tonalidade de cinza claro aí que a gente tá conseguindo perceber bem Tá certo então feito isso aqui vamos vamos fazer um ajuste aqui no header que é bem é bem pouco também que é só aumentar um pouco a fonte né essa fonte aqui do cabeçalho tá pequena então vamos aqui no header né no index nós temos aqui os textos que estão sendo exibidos então para cada texto nós estamos definindo um Flex tá a gente vai definir aqui também um fonte

size para cada um de os 14 pixis 14 é o padrão né 16 isso 16 pixis vai ficar bom então vou copiar e colar aqui né porque ninguém é besta e isso aí todos com tamanho alterado Tá certo então vamos partir agora pra estrutura da lista de produto aqui que é onde eu estou on onde eu tô rizando né o nome do produto e o ID do produto a quantidade que tem no estoque né E também o preço tá o preço desse produto então para o que que a gente vai ter que fazer aqui na

verdade né Eh como a gente pode ver o ID ele no exemplo aqui ele é um ID bem pequeno né no nosso como a gente tá buscando do backend é um ID gerado pelo banco de dados é um ID bem grande então a gente vai ter que dar um jeito de cortar esse ID para não exibir todo né e e o stock no caso o preço ele tem o prefixo aqui de RS né E o que mais que a gente vai ter que fazer aqui a questão da imagem né o tem nós temos o nome

mas também teríamos uma imagem como a gente não tem uma imagem vindo do backend eu vou passar só uma View um quadrado mesmo eh com alguma cor de fundo só pra gente perceber que seria uma imagem tá E o que mais alinhar os textos né o stock por exemplo o texto tá alinhado ao centro se a gente olha aqui na nossa lista o texto se alinha à esquerda né então é trazer esses esse texto pro centro também e tem também a questão do ícone de deleção né que nesse caso aqui do nosso XD nós temos

três pontos né mas no nosso no no no projeto nosso aqui nós vamos colocar um iconz de lixeira Tá então vamos voltar aqui no nosso código e aqui no código O que que a gente vai tá fazendo a gente vai começar por onde Na verdade vamos começar pela imagem né Eh a imagem como eu falei seria uma View vazia né Então essa View a gente pode definir ela como self close e passar um estilo aqui para ela vou passar o estilo em Line mesmo que seria só uma largura talvez uns 20 pixis uma altura também

de 20 piis e um background color eu vou pegar aqui o tema o tema a cor primária é que vai ser esse quadradinho roxo tá então vamos vamos imaginar que esse quadradinho roxo é a imagem tá beleza e o que mais que a gente vai ter aqui o item né o Na verdade o ID esse ID a gente vai ter que fazer um a gente vai ter que alterar algumas coisas aqui fazer alguns Alguns usar alguns artimanhas aqui para conseguir é controlar a largura o o o quanto desse texto que eu quero exibir porque um

um dos artifícios que a gente tem aqui é usar a propriedade do do texto né da tag text a propriedade multi na verdade não é multi né É É Number of Lines o número de linhas que esse texto meu pode ter então se eu falar que ele só tem uma linha olha lá ó a gente já eh cortou aqui o tamanho desse ID tá então uma vez que eu falei que ele só tem uma linha ele vai de colocar texto na largura máxima dele e o que tiver a mais ele vai ele já coloca pra

gente ali os três pontinhos né então ele já ajusta esse texto aqui para mim só que nesse caso eu quero passar uma largura específica porque eu não quero que esse texto ocupe sempre Eh toda a largura que eu tenho disponível aqui na lista ou ou na verdade na verdade não né na verdade vamos deixar dessa forma aqui porque nesse exemplo eh o que que eu vou estar fazendo deixa eu puxar aqui mais um zoom aqui eh nesse caso aqui eu vou alinhar o o número do estoque né o valor de unidades que a gente tem

no estoque eu vou alinhar esse texto ao centro então é bem provável que ao alinhar isso aqui ele vai eh vai ficar uma aparência legal né mas só que a gente tem que ver aqui isso de acord a gente for fazendo aqui a gente for estilizando a gente vai decidindo como que vai ficar tá então eu vou voltar aqui vou vir aqui no amount né Na quantidade que nós temos no stock e aqui que eu definiria por exemplo o o alinhar no centro né então no estilo aqui do do preço eu posso fazer o seguinte

eu posso definir aqui um text align se eu não me engano é isso aqui tá Tex Center não não ficou Ok não eu tô definindo no Price né não é no Price é no stock no amount aqui na linha de cima é ele mesmo esse essa propriedade text align o nome já sugere né É para alinhar o texto em alguma posição nesse caso aqui eu tô alinhando ele ao centro né Então olha lá como é que ficou vou puxar o zoom aqui de novo para ver melhor né os ids ficou clipado aqui e o stoque

o texto veio pro centro então tá ok não vejo problema aqui não em questão do estilo o preço vamos voltar lá no preço é porque o preço isso amount Price né no preço aqui a gente vai ter o prefixo ali do RS né então antes de eu renderizar a variável item P Price né do nosso o valor que vem do backend eu vou colocar aqui o r e o cifrão e ele vai renderizar lá RS talvez a gente D um espaço ou não não tem espaço não ele vai tá aqui o RS antes do valor

é tem a questão da máscara também tá a máscara de dinheiro né de moeda que é um tópico muito interessante também mas a gente não vai est abordando tá a gente não vai est mexendo com com máscaras aqui mas eh Vale deixar aí o o tópico a ser pesquisado caso você queira aplicar essa máscara de dinheiro a máscara é o ponto e a vírgula tá nesse nesse número que vem do backend que no caso é 1588 né e venho a máscara e coloco o ponto e a vírgula nos locais corretos Tá beleza então feito isso

aqui eh O que que a gente tem que fazer agora eh a imagem né vamos voltar aqui no nosso vs code e esse list item contêiner é o estilo aplicado para cada lha da tabela né cada linha da minha lista então aqui no arquivo de estilo eu só definindo Flex Direction R né Mas se a gente volta aqui no XD a gente pode ver que tem um espaçamento né um um espaçamento tanto horizontal né desses lados aqui quanto vertical então o que que eu vou fazer aqui no list item coner Vou definir aqui um pading

PED horizontal talvez uns 10 PI isso 10 piis ficou bom e também um padding vertical de 20 pi não ficou muito né 10 isso 10 ficou Ok só que com isso aqui a gente começa a ter problema tá a gente começa a ter problema e na verdade não não é assim é uma falta de alinha alinhamento né porque já tava desalinhado aqui a questão do preço né da coluna preço com o valor e a gente vai ter que resolver isso quando eu coloquei né esse padding e aumentou ainda mais essa diferença então uma das soluções

seria eu aplicar o padding não no no contêiner inteiro da lista né Principalmente o horizontal tá o vertical a gente não vai ter problema porque não vai desalinhar das colunas lá em cima mas o horizontal eu poderia est aplicando esse esse distanciamento né ou ou que não seria mais padding seria uma margem eu poderia aplicar uma margem aqui na minha imagem por exemplo que essa View que eu renderizei né eu poderia aplicar uma margem à esquerda E aí a imagem chegaria paraa direita né funcionaria ok também eh na direita nós não estamos precisando ainda desse

desses passar né Mas vamos deixar dessa forma do jeito que tá agora e vamos colocar aqui o ícone de deleção né de delete a lixeirinha porque aí sim a gente vai ter noção melhor de como organizar isso né é isso isso at é até uma coisa bem interessante se fazer sempre que a gente tá estilizando que é primeiramente colocar todos os itens na tela e a depois a gente aplica o estilo em cima tá para não ficar e às vezes a gente ajusta muito e tal fica OK daquele jeito mas aí Ah vem um coluna

A mais vem Um item a mais um botão a mais um campo a mais e aí começa a bagunçar os ajustes que a gente fez anteriormente tá então aqui nós teríamos depois do preço né o ícone chamado delete icon que é um ícone que eu converti né que veio lá de um svg eh se vocês lembram direitinho e eu expliquei né tem a aula aí onde a gente fala sobre os svgs e nesse caso aqui o que que eu tenho que o que que na verdade vamos abrir aqui o delete icon né que quando a

gente converte o svg para uma componente ele recebe aqui essas props né que é um svg props Então essa componente ela já é inteligente também porque essas props que eu recebo eu repasso pra minha tag svg tá que é a tag pai aqui do do svg que é isso os pros né a gente Repassa para cá então já que eu tô passando eu posso por exemplo no delete icon definir a largura para ele tá então vou definir a largura de por exemplo 24 pixis vamos ver aqui no app como é que fica isso ele já

ficou eh um tamanho bom né um tamanho interessante aí ou 20 24 né Isso ficou melhor então com com esse ícone aqui agora a gente pode aplicar alguns estilos nele também tá paraa gente conseguir eh posicionar ele direitinho para ele ocupar o espaço que a gente quer e começar a alinhar as coisas aqui então no meu arquivo de Styles a gente definiu aqui um Flex né um valor de Flex pro ícone Dell tá que é o valor aqui ó 0.05 que significa 5% do espaço em branco é para ser o pelo botão Dell tá então

no cabeçalho no header aqui ó vamos abrir aqui o header o header nós temos o o Style também isso o o Flex né que é o valor aqui pro Dell Mas se nós olhamos aqui nos itens nós não temos um um text uma tag text também para pro pro Dell eu tô chamando de D né mas é o ícone delete por quê Por que que eu tô falando isso porque aqui só tem quatro elementos tá então Aqueles valores que eu passei em porcentagem eles estão por exemplo 95% do espaço em branco tá sendo espalhado tá

sendo distribuído né pro nome pro ID pro amount e pro preço e tem 5% que eu deixei separado pro ícone de delete que não está sendo distribuído aqui porque não tem um elemento né quando lá na aula passada quando dei o exemplo eh o o espaço é separado para cada elemento elemento que está na tela né E se eu não tenho um elemento aqui pro ícone de delete ele não vai ocupar esse espaço e aí vai causar essa falta de alinhamento tá porque tá faltando um elemento ali para ocupar aquela posição por mais que eu

não vou ter opção uma lixeirinha aqui no cabealho mas eu vou colocar aqui um ícone Um item né um texte aqui vazio só para fazer o representar né na minha flexbox aquela aquela porcentagem aquele espaço que seria ocupado que vai ser ocupado né pelo ícone de delete então aqui o Styles né Styles pid tá E olha lá ele já começou a se ele tentou organizar Aqui não deu muito bom porque o estoque né o texto estoque é muito grande para pro espaço que foi definido para ele e aí acabou quebrando a linha Então por quebrar

a linha e aí bagunçou tudo a altura e a largura em si ficou fora de proporção e eu imagino que ficou dessa forma porque a gente Aumentou a fonte tá lembra que lá no início a gente Aumentou a fonte do cabeçalho Então vou tirar aqui Esse aumento da fonte só pra gente ver como que ele vai se organizar e olha lá ó sem o tamanho da fonte né ele já se arrumou já deixou de quebrar a linha né mas continua desalinhado Olha só o preço aqui né a coluna preço tá totalmente desalinhada com os valores

aqui tá então para ajustar isso e a gente vai ter que mexer aqui em alguns valores tá na verdade não é nem valores Mas se a gente volta aqui ó vamos voltar no nosso na lista de produto né lembra que a gente colocou aqui uma View que é esse quadrado eh roxo que tá tá meio que ocupando o lugar ali da imagem dentro da flexbox ele também vai esse essa View vai ser considerada Como Um item tá então se eu tirar essa View e salvar ele vai se ajustar ali o as posições né Só que

também ainda não vai ficar do jeito que a gente quer nas posições que a gente quer então para ajustar isso aqui para deixar tudo ok eu vou fazer o seguinte a gente vai ter que fazer o seguinte no meu arquivo de estilo eh na verdade pra gente descobrir o que tá acontecendo aqui a gente vai ter que brincar com um pouco das cores Tá o que que eu vou tentar fazer agora eu vou tentar descobrir Qual item que tá ocupando mais espaço do que deveria tá porque tá causando esse desalinhamento aí então tem algum tem

itens aqui que tá ocupando mais mais espaço do que deveria E se eu ven aqui no cabeç vamos começar pelo cabeçalho né no cabeçalho o nome aqui eu vou definir aqui um background Color eh de verde tá E olha lá esse espaçamento aqui é o espaço destinado pro nome né então querendo não tá ok né Tá certo o nome é o ID também eu sei que tá correto vamos mover aqui o background color ó o ID tá correto Hum E aqui olha lá ó já achamos aí onde procurar o O que que tá causando esse

problema né porque eu coloquei background color né no estilo do id e tanto o o ID a coluna ID quanto um espaço aqui na direita ficou verde né então vamos olhar aqui no header e olha lá ó eu tô aplicando né o estilo de ID para esse texto vazio que eu acabei de criar tá aqui é o texto que representaria né a coluna D então aqui não é Styles pid Styles P Dell tá para para essa coluna delete ocupar 5% do espaço então se eu mover aqui o background color para esse D aqui salvar olha

lá ó tá ocupando só esse espacinho aqui que é o basicamente a largura da lixeira né Então tá Ok eh então Basicamente já já encontramos o problema né Eu tava pensando em começar ainda bem que a gente começou pelo cabeçalho porque eu ia espalhar esse background color aqui na nos itens da lista pra gente tentar entender melhor mas foi basicamente uma confusão ali na hora de eu copiar o estilo e colar né no do pai pro filho do pai pro filho não né copiar os textos aqui do header eu acabei e não mudando o estilo

tá então feito isso é até interessante tá deixar isso aqui no no vídeo para vocês verem que eh o dia a dia da programação É bem isso né Às vezes a gente tá com a aula aqui Preparada Tá tudo programado tudo pensado né mas na hora aqui do fazer acaba gerando alguns problemas e eu acho bom gerar esses problemas assim porque eu vou conseguindo transmitir para vocês como é mais o dia a dia do programador o dia a dia do da improvisação né que a gente tem que ter ali como como desenvolvedores sempre procurando erros

e gravando aqui é pior a ainda né porque a gente não quer e ter que ficar estendendo muito as coisas então é uma experiência boa para que você para que vocês acompanhem aí como funciona o dia a dia de um de um desenvolvedor Tá mas voltando aqui tá mas voltando aqui agora que a gente resolveu né o problema ali do alinhamento vamos continuar tá vamos mexer aqui agora no delete a no ícone de deleção por quê Porque ele tá posicionado referente à outra a linha em si né ele tá posicionado de uma forma estranha né

ele não tá no lugar correto então a gente consegue passar um Style para ele eh deixa eu ver se eu consigo passar aqui um background color isso CONSEG a gente consegue sim e o ícone de deleção ele tá com a altura né a altura dele tá maior do que a gente precisa né então tô passando a largura aqui de 24 eu vou passar a altura também e agora sim eh a gente não vai tá ocupando tanto espaço da linha né e vertical tá então vou apagar aqui o background color que a gente usou para descobrir

ã e o que mais que nós temos que fazer a margem né a margem aqui na esquerda é já que na direita né nós já temos aqui esse espaçamento por conta do ícone de deleção né e da coluna vazia ali na parte superior já que o espaçamento aqui tá ok vamos aplicar um espaço só na imagem na imagem e no texto que descreve a imagem né Vamos fazer o seguinte esses dois itens aqui ó essa vi né a vi que representa a imagem e o texto né o nome da imagem no caso o nome da

imagem não né o nome do produto esses dois aqui a gente pode criar um contêiner para eles tá então eu vou criar outra View e aqui dentro eu vou colocar a imagem e o texto tá salvando aqui ele quebrou o estilo né porque ficou um em cima do outro a gente vai ter que ajustar aqui então aqui eu vou ter o vai serber Styles ponto eh eu tô chamando isso aqui de name container tá que é o contêiner pro nome do produto certo então vamos criar ele aqui tá E aqui dentro dele o que que

eu vou fazer vou passar um Flex Direction Row né para ele se posicionar e em linha né E o que mais eu tenho que definir um Flex pro para esse contêiner também né para ele ocupar como a gente definiu aqui ponto 35 né então esse contêiner vai ocupar 35% do espaço em branco né não é mais o name porque agora o name tá dentro deste contêiner né então se eu sal isso aqui ele ocupa agora o espaçamento certo e agora eu não preciso mais do desses Tiles aqui no o nome na na tag texto né

que seria esse texto que tá sendo exibido aqui com o nome do produto porque eu não preciso mais falar para ele ocupar só 35 porque assim e o o contêiner ele tá ocupando o tá com Flex de 35% né E se eu passo para essa tag text aqui o Flex de 035 também essa tag text ela só vai ocupar 35% de 35 né que seria o contêiner externo esse name contêiner ocupa 35 e aqui dentro ele vai pegar 35% dos 35% do pai que é o pai né Enfim acho que vocês conseguiram entender eu que

tô bagunçando tudo mas beleza é definido isso aqui o que que a gente vai fazer vamos voltar aqui agora no Name container e Vou definir aqui um pading né Um pading Só que no caso só na esquerda né pading left de 10 e agora a gente chegou a imagem só imagem né pro lado aqui sem mexer muito no nosso na estrutura no alinhamento aqui do resto de tudo tá Eh vamos voltar