23.11.2024

Aula 115: Stacks Preguiçosos e Grades Preguiçosas

No SwiftUI, uma das características poderosas é a capacidade de criar interfaces de usuário dinâmicas que se ajustam ao tamanho e ao conteúdo das suas views. Os stacks e grades preguiçosos são ferramentas que ajudam a melhorar o desempenho do seu aplicativo, carregando apenas as views que são necessárias no momento.

Nesta aula, vamos explorar LazyVStack, LazyHStack e LazyVGrid no SwiftUI, demonstrando como usá-los de forma eficaz.

LazyVStack

LazyVStack é um stack vertical que carrega suas views filhas sob demanda. Quando você rola até uma view que não está atualmente na tela, ela é criada, o que pode levar a melhorias de desempenho, especialmente em listas longas de itens.

Exemplo de LazyVStack

Aqui está um exemplo simples de um LazyVStack que exibe uma lista de itens:

import SwiftUI

struct ContentView: View {
    let items = Array(1...1000)

    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(items, id: \.self) { item in
                    Text("Item \(item)")
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue.opacity(0.3))
                        .cornerRadius(8)
                        .padding(.horizontal)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explicação

• O ScrollView nos permite rolar pelo conteúdo.
• LazyVStack cria um stack vertical que gera views apenas para os itens que estão atualmente visíveis, além de um buffer extra visível.
• O loop ForEach constrói as views com base no array de itens.

LazyHStack

Assim como o LazyVStack é um stack vertical, o LazyHStack é um stack horizontal que carrega suas views de forma preguiçosa.

Exemplo de LazyHStack

Veja como você pode criar um stack horizontal usando LazyHStack:

import SwiftUI

struct HorizontalStackView: View {
    let items = Array(1...20)

    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(items, id: \.self) { item in
                    Text("Item \(item)")
                        .padding()
                        .frame(width: 100)
                        .background(Color.green.opacity(0.3))
                        .cornerRadius(8)
                        .padding(.horizontal)
                }
            }
        }
    }
}

struct HorizontalStackView_Previews: PreviewProvider {
    static var previews: some View {
        HorizontalStackView()
    }
}

Explicação

• O ScrollView horizontal exibe o LazyHStack, permitindo rolagem horizontal.
• Cada item no ForEach cria uma view com padding e uma cor de fundo.

LazyVGrid

LazyVGrid fornece uma maneira de dispor views filhas em um formato de grade verticalmente. As views na grade também são criadas sob demanda, resultando em melhor desempenho.

Exemplo de LazyVGrid

Vamos criar um layout de grade com LazyVGrid:

import SwiftUI

struct GridView: View {
    let items = Array(1...20)

    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(items, id: \.self) { item in
                    Text("Item \(item)")
                        .padding()
                        .background(Color.orange.opacity(0.3))
                        .cornerRadius(8)
                }
            }
            .padding(.horizontal)
        }
    }
}

struct GridView_Previews: PreviewProvider {
    static var previews: some View {
        GridView()
    }
}

Explicação

• Com o LazyVGrid, definimos uma estrutura de grade com três colunas flexíveis.
• O ScrollView nos permite rolar pela grade, carregando as células conforme necessário.

Conclusão

Nesta aula, abordamos o uso de LazyVStack, LazyHStack e LazyVGrid no SwiftUI para criar interfaces de usuário eficientes e voltadas para o desempenho. Esses componentes são especialmente úteis ao lidarmos com grandes conjuntos de dados, garantindo que apenas as views necessárias sejam criadas e renderizadas. Experimente esses containers preguiçosos em seus próprios projetos SwiftUI para melhorar a renderização da interface e o desempenho!

Video

Navigation