Lição: 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 oLazyHStack
, 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!