List — o que é, o componente de lista no SwiftUI

O que é List no SwiftUI?

List é uma View que exibe uma sequência de itens em uma lista verticalmente rolável. Foi introduzida no iOS 13 junto com o SwiftUI e é a principal forma de exibir listas de dados, substituindo o UITableView do UIKit. List gerencia automaticamente a reutilização de células, rolagem e desempenho.

List usa lazy-loading: as células são criadas conforme você rola, não todas de uma vez. Isso a diferencia de VStack com ForEach dentro de ScrollView, onde todas as células são criadas no momento da renderização. List também fornece suporte integrado para ações de deslize, pull-to-refresh, edição (excluir/mover) e seleção de linhas.

De acordo com Apple WWDC 2021 (Session 10072), List no iOS 15+ recebeu melhorias significativas de desempenho graças a um novo mecanismo de diffing no nível de coleções. Isso tornou List mais eficiente ao atualizar dados, especialmente para listas com centenas de linhas.

List vs ScrollView + VStack

Desenvolvedores frequentemente escolhem entre List e ScrollView com VStack para exibir um conjunto de Views. A diferença principal: List usa reutilização de células (como UITableView), enquanto ScrollView + VStack cria todas as Views imediatamente. Para listas de tamanho fixo (até 20 itens), a diferença é insignificante. Para listas dinâmicas com 50+ linhas, List é preferível para desempenho.

Listas estáticas e dinâmicas

Lista estática é uma lista com um número fixo de linhas especificadas diretamente no corpo de List. É usada para menus, configurações e formulários com um conjunto conhecido de itens. Cada linha é declarada explicitamente, sem loops ou ForEach.

// Lista estática (para menus e configurações)
List {
    Text("Perfil")
    Text("Configurações")
    Text("Sobre")
}

// Lista dinâmica (para dados)
struct UserList: View {
    let users: [User]

    var body: some View {
        List(users) { user in
            HStack {
                Text(user.name)
                Text(user.role)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Lista dinâmica usa o inicializador List(data:rowContent:) ou ForEach dentro do corpo de List. A primeira abordagem é conveniente quando cada linha corresponde a um item de dados. A segunda é útil quando há seções ou itens adicionais entre os dados.

Identificação (Identifiable): Para listas dinâmicas, os itens de dados devem estar em conformidade com o protocolo Identifiable, ou você deve especificar um KeyPath para um identificador único na tupla data:id. SwiftUI usa identificadores para rastrear alterações: adições, exclusões e movimentações de linhas.

Seções e agrupamento de dados

Section é uma View para agrupar linhas em uma List com um cabeçalho e um footer opcional. Section aceita header e footer como ViewBuilder, permitindo usar não apenas texto, mas também Views personalizadas para cabeçalhos de seção.

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("Conta")) {
                Text("Nome")
                Text("Email")
            }
            Section(header: Text("Notificações")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// Seções dinâmicas com ForEach
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

Estilos de List: SwiftUI fornece vários estilos integrados através do modificador .listStyle(). .insetGrouped — padrão para iOS Settings, .plain — minimalista, .inset — com recuo, .sidebar — para Sidebar no iPad.

De acordo com SwiftUI Cookbook (2024), Section com seções dinâmicas e ForEach dentro é um padrão padrão para agrupar dados em aplicações com estrutura complexa. A regra principal: não aninhe Section dentro de Section, e não use o inicializador List(data:) junto com Section — use ForEach dentro do corpo de List.

Ações de deslize e pull-to-refresh

.swipeActions(edge:allowsFullSwipe:content:) — um modificador para iOS 15+ que adiciona ações de deslize às linhas de List. Permite exibir botões ao deslizar para a esquerda (padrão) ou direita, com diferentes cores e funções (destructive, cancel).

struct TaskList: View {
    @Binding var tasks: [Task]

    var body: some View {
        List {
            ForEach($tasks) { $task in
                Text(task.title)
                    .swipeActions(edge: .trailing) {
                        Button("Excluir", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "Desfazer" : "Concluído") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // Carregamento de dados assíncrono
            await loadTasks()
        }
    }
}

.refreshable — um modificador para iOS 15+ que adiciona pull-to-refresh. Aceita um closure assíncrono que é executado quando o usuário puxa a lista para baixo. SwiftUI exibe automaticamente um indicador de carregamento. Após a conclusão da operação, o indicador é ocultado.

.onDelete e .onMove — modificadores para iOS 13+ que adicionam suporte para exclusão e reordenação de linhas. Para usá-los, envolva os dados em ForEach com Binding ou passe closures através de .onDelete(perform:) em List ou ForEach.

Desempenho do List e otimização

O desempenho do List depende do número de linhas, da complexidade de cada célula e da frequência das atualizações de dados. SwiftUI usa lazy-loading e reutilização de células (semelhante a UITableView.dequeueReusableCell), mas otimizações adicionais podem ser necessárias para listas com 500+ linhas.

Problema 1: Atualizações frequentes. Se os dados na lista são atualizados com frequência (por exemplo, a cada segundo), List pode redesenhar as células visíveis a cada mudança de estado. Solução: use estruturas (value types) para os dados — SwiftUI as compara por valor e redesenha apenas as linhas alteradas.

Problema 2: Células pesadas. Se cada linha contém uma hierarquia complexa de Views, imagens e animações, a rolagem pode ficar lenta. Solução: extraia as células em Views separadas, use EquatableView para evitar redesenhos desnecessários. De acordo com SwiftUI Lab (2024), dividir uma linha complexa em subcomponentes reduz o tempo de renderização em 30–50%.

Problema 3: Grande número de linhas. Com 1000+ linhas, List ainda funciona eficientemente graças ao lazy-loading, mas o carregamento inicial pode ficar lento devido ao cálculo de layout. Solução: use LazyVStack apenas para listas com linhas uniformes onde os recursos de List (deslize, seções) não são necessários. Para listas completas, List continua sendo a melhor escolha.