Agora, na lista que estamos renderizando aqui, nossos itens de lista são tão amplos quanto a lista, porque estamos agrupando a lista nessa visualização
aqui em torno da visualização de rolagem;
portanto, isso define a largura da adição de visualização de rolagem que define a largura da itens lá.
Agora, digamos que tenhamos uma largura diferente aqui no item da lista, digamos que a largura de um
item da lista deva ser apenas
60% da lista, portanto, não é 100% o padrão, mas apenas 60%. Se fizermos isso e começarmos, agora você vê isso
à esquerda, o que faz sentido, o posicionamento padrão aqui se você definir uma
largura em um item que esteja dentro de uma caixa flexível e os itens da lista estiverem dentro de uma
caixa flexível porque a exibição de rolagem internamente também usa flexbox no final, apesar de haver algumas diferenças em relação ao
flexbox normal e voltarei a elas, mas ele ainda usa flexbox e, portanto, como definimos uma largura, o
padrão de esticar itens filho ao longo do eixo transversal e o eixo cruzado seria o eixo horizontal porque temos a coluna de
direção flexível como padrão, mas o alongamento padrão é substituído porque temos uma largura em nosso item
de lista, assim como em nossos elementos filhos. Agora, ainda podemos querer centralizar esses itens na
lista e, para isso, você pode ir para a exibição de rolagem e atribuir um
estilo
lá, embora não através do suporte de estilo que você pode usar, mas que não permite estilizar nada.
mas para estilizar o conteúdo em uma exibição de rolagem e aplicar, por exemplo, configurações flexíveis para o
conteúdo, você precisa usar o estilo do contêiner de conteúdo e isso é apenas
algo para memorizar ou pesquisar nos documentos oficiais, é claro. Para a exibição de rolagem e para o FlatList, você tem esse estilo de contêiner
de conteúdo usado para controlar o layout dentro dessa exibição de rolagem.
Agora, nesse estilo de contêiner de conteúdo, agora podemos nos referir à lista de estilos e, portanto, deixe-me renomear esse estilo
de lista atual que estamos aplicando a esse agrupamento, exibir o contêiner de lista, porque no final é um
contêiner em torno de nossa lista e isso aqui é a própria lista.
Como alternativa, você poderia ter nomeado o conteúdo desta lista, é claro, mas vou apenas nomear a lista e
renomear a outra coisa para listar o container. Portanto, isso aqui será renomeado para listar contêiner
e agora podemos adicionar uma nova propriedade de lista aqui à folha de estilo e que
agora está dentro da visualização de rolagem, estilizando nosso contêiner ou exibindo nosso conteúdo de contêiner para ser preciso e
preciso, pois isso usa Na caixa flexível internamente, você pode usar os itens de alinhamento para controlar o alinhamento ao longo do
eixo transversal e configurá-lo para o centro, e isso agora deve garantir que os itens sejam centralizados novamente caso sejam menores e
é isso que está acontecendo aqui.
Portanto, com isso, você sabe como controlar e distribuir o conteúdo dentro de uma exibição
de rolagem ou de uma lista em geral. Agora, e se você também quiser controlar a caixa flexível ao longo do eixo principal?
Digamos que nossa lista aqui, na verdade, não deve começar logo abaixo desta caixa aqui com nossos controles, mas um pouco mais abaixo, deve
começar na parte inferior da tela e depois crescer até o topo e, em seguida,
só pode ser rolada quando atingir o topo.
Isso também pode ser controlado com nosso estilo de lista, que é o estilo aplicado ao estilo do contêiner de conteúdo,
portanto, com esse estilo, você também pode controlar isso adicionando justifyContent porque o justify content permite que
você posicione o conteúdo ao longo do eixo principal da caixa flexível e O eixo principal do flexbox
por padrão é o eixo vertical porque a direção padrão é a coluna.
Então, aqui, agora vamos usar o flex end em vez do padrão, que é flex start e flex end, agora deve realmente mover os
itens para o final da lista.
Então, vamos ver se
isso
funciona, né, parece não funcionar, certo?
O problema aqui é que a visualização de rolagem apenas aumenta essa visualização interna que é agrupada no final quando novos
itens são adicionados, agora
queremos que a visualização interna cresça automaticamente. Em uma visão normal,
conseguiríamos isso adicionando o flex one.
Então, vamos tentar isso aqui nesta lista de estilos que também adicionamos à exibição de rolagem.
Se adicionarmos aqui, agora você vê que isso se comporta corretamente, começa aqui na parte inferior e agora vamos aumentar
isso e espero que não
resolvamos isso muito cedo e veja, podemos rolar. Então, isso realmente está crescendo e funciona exatamente da maneira que queremos. É rolável e geralmente funciona da
maneira que queremos, mas você notará que na verdade não pode rolá-lo de forma
que sempre veja o item mais recente. Você pode rolar para lá, mas depois ele volta a subir
e provavelmente não é isso que queremos, no Android,
também não funciona. Lá, se
agora começarmos a adivinhar, você verá o mesmo
comportamento, bem, se eu chegasse lá, a única diferença é que ele está quebrado por
um motivo diferente, eu não consigo nem rolar. Portanto, o flex one realmente não funciona, o que você pode usar lá
é algo que não usamos antes e que é o flex grow. Agora, o flex grow também garante que o
item ao qual você adiciona isso cresça e ocupe o máximo de espaço possível, assim como o
flex one, a diferença é que o flex grow funciona um pouco diferente internamente, é mais flexível
que o flex. O Flex simplesmente diz
que ocupa todo o espaço disponível em todas as direções possíveis, o flex grow instrui
basicamente o contêiner a crescer, a ocupar o máximo de espaço possível e o fará, mas mantém o
outro
comportamento normalmente, neste caso da visualização de rolagem, onde é rolável e também pode
exceder os limites da tela.
Portanto, é um pouco mais flexível e você provavelmente não precisa disso muitas vezes em uma exibição normal, mas em
uma exibição de rolagem, é exatamente
o que precisamos e só estou mostrando isso aqui, porque esse é um caso especial que você apenas precisa
sabe ou sobre o
que você pode tropeçar e, normalmente, encontra soluções no estouro de pilha e assim por diante, aqui encontra-se neste curso
porque é um cenário que você pode encontrar e, portanto, esperançosamente, você pode se lembrar dessa palestra
e ver como resolver isso.
Então eu adicionei flex grow a essa propriedade de lista e agora vamos tentar novamente. Aqui no iOS, se começarmos a
adivinhar números aqui, agora você verá que eu posso realmente rolar de modo que o item mais recente fique visível e também posso rolar de
modo que o item mais antigo fique visível,
agora isso mostra o comportamento que queremos, obrigado flexionar crescer.
E no Android, será o mesmo se iniciarmos um jogo
lá, veja agora, também posso rolar isso aqui e posso ver o palpite mais recente e o palpite mais antigo.
Portanto, agora isso está funcionando da maneira que deveria aqui no Android e iOS, e eu estava mostrando tudo isso de forma simples, para
você conhecer esses padrões, esse estilo especial de contêiner de conteúdo na exibição de rolagem e também queria ter certeza de que
você estava ciente de alguns dos problemas com os quais você pode se deparar quando
começa a estilizar uma lista e quando deseja adicionar seu próprio layout, então existem alguns truques que podem
ser muito úteis se você encontrar essa situação no seu aplicativo.