Form no SwiftUI: o que é, criar e configurar formulários

O que é Form no SwiftUI?

Form é um contentor especializado do SwiftUI projetado para criar formulários de entrada e ecrãs de configurações. Ele herda o comportamento do List, mas adiciona estilos específicos da plataforma: no iOS, o Form exibe-se como uma tabela agrupada com cantos arredondados nas secções; no macOS, aparece como uma lista padrão do sistema com caixas de seleção e controlos.

Ao contrário do layout manual com VStack e HStack, o Form organiza automaticamente o espaçamento entre elementos, adiciona separadores e adapta a sua aparência ao tema do sistema — claro ou escuro. O programador descreve apenas a estrutura lógica: Section para agrupar e os controlos dentro. O próprio formulário decide como dispor visualmente o Picker, Toggle ou Stepper numa plataforma específica.

O Form suporta todos os elementos de entrada padrão do SwiftUI: TextField para texto, SecureField para palavras-passe, Picker para seleção de lista, Toggle para ligar/desligar, Slider para intervalos, Stepper para valores incrementais e DatePicker para datas. Cada elemento obtém automaticamente um estilo correspondente às HIG (Human Interface Guidelines) da Apple na plataforma de destino.

Form vs List: comparação de contentores

Apesar da sua semelhança visual, Form e List resolvem tarefas diferentes. List é um contentor universal para exibir listas de dados com capacidade de scroll, ações de deslize e edição de linhas. Form é um contentor especializado para entrada de dados e configurações, otimizado para estilos de controlo do sistema.

List é adequado para exibir dados dinâmicos: feeds de notícias, chats, catálogos de produtos. Form é para ecrãs estáticos com um conjunto previsível de campos: perfil de utilizador, configurações da aplicação, formulário de registo. A diferença chave: os elementos do Form podem ser controlos interativos, enquanto as linhas do List geralmente exibem dados e respondem ao toque com navegação ou ação.

De acordo com as Apple Human Interface Guidelines (2025), o Form deve ser usado para ecrãs de configurações e entrada onde existam de 3 a 20 controlos num ecrã e dividi-los em secções melhora a usabilidade.

Secções Section dentro de Form

Section é o bloco de construção principal do Form, permitindo agrupar elementos logicamente relacionados. Cada Section pode ter um cabeçalho, rodapé e qualquer número de controlos no interior. O sistema adiciona automaticamente espaçamento entre secções e envolve cada uma num bloco visual com cantos arredondados.

Usar Section é fundamental para a legibilidade do formulário: elementos agrupados por significado são mais fáceis de processar pelo utilizador. Por exemplo, num ecrã de configurações de perfil, podem separar-se «Dados pessoais», «Notificações» e «Segurança» em secções individuais. Cada secção pode conter um rodapé com texto explicativo que o sistema exibe num tipo de letra mais pequeno abaixo do grupo de elementos.

Form {
    Section(header: Text("Perfil")) {
        TextField("Nome", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Notificações"),
            footer: Text("Desativar durante reuniões")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

No exemplo, a primeira secção «Profile» contém dois campos de texto sem rodapé, a segunda secção «Notifications» contém dois interruptores com uma explicação abaixo do grupo. O rodapé adiciona automaticamente espaçamento e usa o estilo de tipo de letra caption. Uma Section pode ter um rodapé sem cabeçalho ou um cabeçalho sem rodapé.

Controlos em Form

O Form suporta todos os elementos de entrada padrão do SwiftUI. Picker no Form exibe-se automaticamente como uma linha de navegação com transição para um ecrã de seleção separado no iOS. Toggle aparece como uma linha com um interruptor alinhado à direita. TextField obtém o estilo de entrada do sistema com um espaço reservado.

Para valores numéricos, usam-se Stepper (alteração incremental) e Slider (alteração suave num intervalo). DatePicker suporta vários modos: date, time, dateAndTime. ColorPicker está disponível para seleção de cor. Cada elemento adapta-se à plataforma sem código adicional — no iOS, os controlos usam estilos nativos do UIKit; no macOS, do AppKit.

Para controlos personalizados dentro do Form, pode usar-se qualquer SwiftUI View — elas herdam o comportamento padrão da secção. No entanto, recomenda-se usar elementos do sistema, pois garantem conformidade com as HIG e suportam Acessibilidade (VoiceOver, Dynamic Type) sem configuração adicional.

Exemplos de código Form

Vamos criar um ecrã de registo usando Form. O formulário contém quatro secções: dados pessoais, seleção de função, configurações de subscrição e um botão de envio. Usa-se Section para agrupar e controlos padrão do SwiftUI.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Informações pessoais")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Função")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("Registar") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

O formulário está dividido em quatro Section: dados pessoais com dois campos de texto, seleção de função através de Picker, aceitação de termos através de Toggle e um botão de registo. O botão está desativado até o utilizador aceitar os termos — isto é um exemplo de validação dentro do Form. NavigationStack adiciona um título e permite que o Picker abra um ecrã de seleção separado no iOS.

Formulário de configurações com subsecções

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Aparência")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Volume")
                    }
                }

                Section(header: Text("Lembretes"),
                        footer: Text("Receberá uma notificação no horário selecionado")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Este exemplo demonstra uma combinação de Slider, DatePicker e NavigationLink dentro do Form. DatePicker usa o modo hourAndMinute para exibir apenas a hora. NavigationLink na última secção cria uma transição para um ecrã de configurações avançadas — um padrão comum para interfaces estilo Settings. Os cabeçalhos e rodapés das secções tornam o formulário autodocumentado: o utilizador compreende imediatamente a que grupo pertence cada controlo.