23.11.2024

Aula 114: Construindo Listas e Grids Complexos em Swift

Nesta aula, vamos explorar como criar listas e grids complexos em Swift usando SwiftUI. SwiftUI fornece ferramentas poderosas para construir interfaces de usuário com layouts flexíveis. Vamos cobrir o uso de List, LazyVStack, LazyHGrid e mais para ajudar você a exibir dados complexos de maneira limpa e organizada.

Criando uma Lista Complexa com SwiftUI

Vamos começar criando uma lista de itens, que inclui imagens, títulos e descrições. Definiremos um modelo de dados simples e o exibiremos em uma List.

Passo 1: Defina o Modelo de Dados

import SwiftUI

struct Item: Identifiable {
    let id = UUID()
    let title: String
    let description: String
    let imageName: String
}

let items = [
    Item(title: "Item 1", description: "Este é o primeiro item.", imageName: "image1"),
    Item(title: "Item 2", description: "Este é o segundo item.", imageName: "image2"),
    Item(title: "Item 3", description: "Este é o terceiro item.", imageName: "image3")
]

Passo 2: Crie a Visualização da Lista

Agora, criaremos uma visualização SwiftUI que exibe esses itens em um formato de lista.

struct ItemListView: View {
    var items: [Item]

    var body: some View {
        List(items) { item in
            HStack {
                Image(item.imageName)
                    .resizable()
                    .frame(width: 50, height: 50)
                    .cornerRadius(5)
                VStack(alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    Text(item.description)
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
            }
        }
    }
}

Passo 3: Use a Visualização da Lista em ContentView

Por fim, podemos usar o ItemListView em nossa ContentView principal.

struct ContentView: View {
    var body: some View {
        ItemListView(items: items)
            .navigationTitle("Lista Complexa")
    }
}

Criando Grids Complexos com SwiftUI

Agora, vamos explorar como criar um layout em grid usando LazyVGrid. Isso é útil quando você deseja exibir itens em um layout de várias colunas.

Passo 1: Defina o Layout do Item do Grid

struct GridItemView: View {
    let item: Item

    var body: some View {
        VStack {
            Image(item.imageName)
                .resizable()
                .frame(width: 100, height: 100)
                .cornerRadius(10)
            Text(item.title)
                .fontWeight(.bold)
            Text(item.description)
                .font(.footnote)
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

Passo 2: Crie a Visualização do Grid

A seguir, criaremos uma visualização para exibir múltiplos itens em um grid.

struct ItemGridView: View {
    let items: [Item]
    let columns: [GridItem] = [
        GridItem(.flexible()), 
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(items) { item in
                GridItemView(item: item)
            }
        }
        .padding()
    }
}

Passo 3: Use a Visualização do Grid em ContentView

Agora vamos atualizar o ContentView para usar ItemGridView.

struct ContentView: View {
    var body: some View {
        ItemGridView(items: items)
            .navigationTitle("Grid Complexo")
    }
}

Conclusão

Nesta aula, aprendemos como construir listas e grids complexos usando SwiftUI. Ao utilizar List, LazyVGrid e visualizações personalizadas, você pode organizar e exibir uma ampla variedade de informações em seus aplicativos de forma fácil.

Sinta-se à vontade para personalizar ainda mais o layout e os estilos dos itens para se adequar à estética do seu app. O SwiftUI torna fácil criar interfaces bonitas e responsivas, sem comprometer seu fluxo de trabalho!

Video

Navigation