19.11.2024

Lição: 78: Listas e ForEach no SwiftUI

O SwiftUI tornou incrivelmente fácil a criação de interfaces de usuário para iOS, macOS, watchOS e tvOS. Um dos elementos mais comuns com os quais você vai trabalhar é a List, que é utilizada para exibir uma coleção de dados em um formato rolável. Nesta aula, vamos explorar como usar List e ForEach para exibir coleções no SwiftUI.

Compreendendo Listas

Uma List no SwiftUI pode ser pensada como um recipiente rolável que apresenta linhas de dados. Com a List, você pode representar dados em vários formatos, e ela fornece automaticamente suporte para recursos como seleção, exclusão e mais.

Uso Básico da List

Aqui está um exemplo simples demonstrando como criar uma lista básica exibindo itens de texto estático.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
            Text("Item 4")
        }
    }
}

Neste código, criamos uma List e adicionamos várias views de Text. Quando esta view for renderizada, ela exibirá uma lista rolável de itens de texto.

Criando Listas Dinâmicas com ForEach

Para renderizar uma lista de dados dinâmicos, podemos usar o ForEach. O ForEach é uma estrutura que calcula views sob demanda a partir de uma coleção de dados identificáveis. Ele pode ser utilizado dentro de uma List para iterar sobre coleções, como arrays.

Exemplo com ForEach

Suponha que temos um array de strings representando nomes de frutas, e queremos mostrá-las em uma lista.

import SwiftUI

struct ContentView: View {
    let frutas = ["Maçã", "Banana", "Laranja", "Uva", "Morango"]

    var body: some View {
        List {
            ForEach(frutas, id: \.self) { fruta in
                Text(fruta)
            }
        }
    }
}

Neste exemplo, estamos usando ForEach para percorrer o array frutas. A parte id: \.self indica que os elementos em si são identificadores únicos.

Usando ForEach com Dados Identificáveis

Para estruturas de dados mais complexas, é melhor conformar-se ao protocolo Identifiable. Isso permite que você forneça um identificador único para cada item, o que é útil para listas que suportam recursos como exclusões e atualizações.

Exemplo com Identificável

Vamos definir um modelo simples para representar uma fruta com um ID.

import SwiftUI

struct Fruta: Identifiable {
    let id: UUID
    let nome: String
}

struct ContentView: View {
    let frutas = [
        Fruta(id: UUID(), nome: "Maçã"),
        Fruta(id: UUID(), nome: "Banana"),
        Fruta(id: UUID(), nome: "Laranja"),
        Fruta(id: UUID(), nome: "Uva"),
        Fruta(id: UUID(), nome: "Morango")
    ]

    var body: some View {
        List {
            ForEach(frutas) { fruta in
                Text(fruta.nome)
            }
        }
    }
}

Neste exemplo, criamos uma struct Fruta que conforma ao protocolo Identifiable com um UUID único para seu ID. O ForEach agora não precisa especificar um id, pois pode derivá-lo do protocolo Identifiable.

Personalizando Linhas da List

Você pode personalizar a aparência de cada linha na lista. Vamos adicionar imagens às nossas linhas da lista.

import SwiftUI

struct Fruta: Identifiable {
    let id: UUID
    let nome: String
    let nomeImagem: String
}

struct ContentView: View {
    let frutas = [
        Fruta(id: UUID(), nome: "Maçã", nomeImagem: "apple.fill"),
        Fruta(id: UUID(), nome: "Banana", nomeImagem: "banana.fill"),
        Fruta(id: UUID(), nome: "Laranja", nomeImagem: "orange.fill"),
        Fruta(id: UUID(), nome: "Uva", nomeImagem: "grape.fill"),
        Fruta(id: UUID(), nome: "Morango", nomeImagem: "strawberry.fill")
    ]

    var body: some View {
        List {
            ForEach(frutas) { fruta in
                HStack {
                    Image(systemName: fruta.nomeImagem)
                    Text(fruta.nome)
                }
            }
        }
    }
}

Neste exemplo, aprimoramos as linhas da lista exibindo uma imagem ao lado do nome da fruta usando um HStack.

Conclusão

Nesta aula, exploramos os componentes List e ForEach do SwiftUI. Aprendemos como exibir listas estáticas e dinâmicas, como usar dados identificáveis e como personalizar linhas dentro de uma lista. Essas ferramentas são fundamentais para criar aplicativos ricos e interativos com SwiftUI. Continue experimentando com diferentes layouts e formatos de dados para se sentir mais confortável com as capacidades de renderização de listas do SwiftUI!

Video

Navigation