Lazy Stacks e Grids
Em algumas ocasiões é necessário apresentar uma grande quantidade de itens na tela, como por exemplo, os resultados de uma busca em um aplicativo de músicas. Entretanto, é provável que se você carregar e exibir muitos itens na tela o sistema ficará mais lento, prejudicando a experiência do usuário.
Para isso, nós podemos utilizar as chamadas Lazy Stacks, que são basicamente as Stacks que conhecemos, como HStack e VStack, porém com o diferencial de que ela não cria os itens até que seja necessário renderiza-los na tela.
Para criar uma Lazy Stack, basta colocar o prefixo “Lazy” nas Stacks que oferecem suporte.
LazyVStack
A LazyVStack exibe as suas views filhas em uma linha vertical, criando itens apenas quando necessário.
O exemplo a seguir cria 100 elementos e os coloca em uma LazyVStack, dentro de uma ScrollView. Cada elemento da view é um Text, que vai chamar o método .onAppear ao ser carregado.
LazyHStack
A LazyHStack é um container que exibe as suas views filhas em uma linha horizontal, criando itens apenas quando necessário.
LazyVGrid
A LazyVGrid organiza suas views filhas em um arranjo vertical, criando seus itens sob demanda.
Um item muito importante para utilizar as grids é o GridItem, que será responsável por definir o layout dos itens dentro da grid. Com ele, podemos customizar o tamanho, espaço entre os itens e o alinhamento dos elementos.
Existem três tipos de GridItem:
- Fixed: O elemento tem um tamanho fixo, não importando a orientação da tela do dispositivo.
- Flexible: O element ajusta seu tamanho dependendo do espaço disponível.
- Adaptive: O elemento pode se adaptar a orientação e ao tamanho da tela, com um valor mínimo para a sua altura e largura. Por exemplo, a grid possui duas colunas no iPhone, mas no iPad ela se adapta e passa a ter três colunas devido ao espaço adicional.
LazyHGrid
A LazyHGrid é um container que exibe as suas views filhas em um arranjo horizontal, que pode ser divididos em uma ou mais colunas, criando os itens apenas quando existir uma demanda.