Section no SwiftUI: o que é, criar seções e agrupar

O que é Section no SwiftUI?

Section é um componente estrutural do SwiftUI projetado para agrupar elementos dentro de contêineres Form e List. Ao contrário de VStack ou HStack, Section adiciona espaçamento do sistema, um cabeçalho e rodapé, bem como destaque visual do grupo na forma de um bloco com cantos arredondados no iOS.

Section não altera o comportamento dos elementos filhos — apenas organiza sua apresentação. Todos os controles dentro de Section — Picker, Toggle, TextField — funcionam normalmente, mas são visualmente combinados em um grupo lógico. Isso é especialmente importante para formulários na tela onde o usuário precisa se orientar rapidamente na estrutura de entrada de dados.

O sistema gerencia automaticamente o espaçamento entre as seções: a distância entre Sections no iOS é de 16–20 pontos, entre elementos dentro de Section é 0 (separador entre linhas). O desenvolvedor não pode alterar esses espaçamentos através de modificadores padding — eles são controlados pelo sistema para garantir uma aparência uniforme.

Cabeçalho e rodapé da Section

Section aceita dois parâmetros opcionais: header — o título do grupo, e footer — texto explicativo abaixo do grupo. O cabeçalho é exibido acima dos elementos da seção em negrito com estilo de caption, o rodapé em fonte menor com cor cinza. Ambos os parâmetros aceitam qualquer SwiftUI View, não apenas Text.

O cabeçalho da Section ajuda o usuário a entender a qual categoria os elementos do grupo pertencem. Por exemplo, em uma tela de configurações, cabeçalhos como “Notificações”, “Privacidade” e “Conta” orientam o usuário instantaneamente. O rodapé é útil para explicações: “Desative as notificações durante reuniões” ou “A senha deve conter pelo menos 8 caracteres.” O rodapé é ajustado automaticamente para várias linhas quando necessário.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

No exemplo, Section tem o cabeçalho “Account Security” e um rodapé com conselhos de segurança de senha. O usuário vê o cabeçalho como rótulo da seção, preenche dois campos e lê imediatamente o aviso abaixo deles. Essa estrutura melhora a UX porque todas as informações sobre a seção estão em uma única tela, sem necessidade de navegar para uma ajuda separada.

Section dentro de Form e List

Section funciona tanto dentro de Form quanto de List, mas a representação visual difere. Em Form, Section é exibida como um bloco com cantos arredondados e fundo do sistema, separada de seções adjacentes por espaçamento. Em List, Section pode usar o estilo plain — sem fundo e cantos arredondados, ou inset-grouped — com blocos arredondados semelhantes a Form.

A escolha do contêiner afeta o estilo da Section. Se você colocar uma Section com o mesmo conteúdo dentro de Form e List com estilo .insetGrouped, o resultado será idêntico. No entanto, Form adiciona espaçamento do sistema e usa estilo grouped por padrão, enquanto List requer especificação explícita do estilo através do modificador .listStyle(.insetGrouped).

Para obter a mesma aparência em List, use .listStyle(.insetGrouped). Este estilo imita a aparência do Form e é adequado para telas de configuração construídas sobre List. Para listas de dados padrão, use .plain — sem destaque de seções, com separadores finos entre linhas.

Conteúdo dinâmico com ForEach

Section pode conter um número dinâmico de elementos através de ForEach. Isso permite criar grupos com elementos repetidos mantendo o cabeçalho e rodapé para todo o grupo. ForEach dentro de Section itera sobre uma coleção de dados e cria Views filhas para cada elemento sem quebrar a estrutura da seção.

Seções dinâmicas são úteis para telas de configuração com número variável de opções: lista de idiomas disponíveis, dispositivos conectados ou assinaturas push. O cabeçalho da seção permanece estático enquanto o conteúdo muda conforme os dados.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Neste exemplo, ForEach gera um Toggle para cada categoria do array categories. O cabeçalho e rodapé da seção são definidos uma vez e se aplicam a todo o grupo. A segunda seção exibe o número de categorias selecionadas — não depende de ForEach e permanece estática. Essa abordagem permite criar formulários flexíveis onde o cabeçalho e rodapé contextualizam um grupo de elementos dinâmicos.

Exemplos de código Section

Vamos ver um exemplo completo de tela de perfil usando Section para agrupar dados. O formulário contém três seções: informações do usuário, configurações de privacidade e estatísticas. Cada seção usa seu próprio cabeçalho, e a última tem um rodapé com informações resumidas.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Três blocos Section separam claramente as áreas funcionais: campos editáveis do perfil, interruptores de privacidade e estatísticas. A segunda seção demonstra validação: o interruptor “Show email” está desativado até que o perfil seja público. O rodapé da terceira seção mostra a hora da última atualização — um exemplo de uso do rodapé para informações contextuais adicionais. LabeledContent é um componente padrão do SwiftUI para exibir pares chave-valor em Form.

Section com cabeçalho personalizado

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Este exemplo mostra que header pode ser qualquer SwiftUI View. Usar HStack com Image e Text adiciona um ícone ao lado do cabeçalho, tornando a seção visualmente mais expressiva. Cabeçalhos personalizados são úteis para destacar seções importantes na interface: configurações de notificações, recursos pagos ou seções com avisos. No entanto, não é recomendado abusar de cabeçalhos personalizados — 1–2 seções com estilo não padrão por tela é suficiente para manter a uniformidade da interface.