Qué es Form

El componente Form es similar al componente List, por lo que permite mostrar un listado vertical de elementos pero con estética de formulario nativo del sistema operativo.

El componente Form modifica los comportamientos de otros componentes de SwiftUI, como en el caso de Picker, donde cambia el modo de selección de los elementos (en este caso es obligatorio incluir el componente Form dentro de un NavigationView para que funcione). No tiene un componente equivalente en UIKit. Aquí puedes consultar la documentación oficial.

El componente Form tiene un único inicializador con un ViewBuilder donde se deben incluir todos los elementos que queramos mostrar en el formulario. Cada vista que se incluya en el formulario corresponderá a una nueva row en el listado, pudiendo incluir el componente Section para crear secciones dentro de Form.

struct ContentView: View {
    let itemsPicker = ["Sevilla", "Cádiz", "Huelva", "Córdoba", "Málaga", "Granada", "Jaén", "Álmería"]
    
    @State private var textFieldSelection: String = ""
    @State private var pickerSelection: String = "Sevilla"
    @State private var sliderSelection: Double = 50
    @State private var colorSelection: Color = .red
    @State private var datePickerSelection: Date = Date()
    @State private var toggleSelection: Bool = true
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("First section")) {
                    Text("Hello, World!")
                    TextField("Select text", text: $textFieldSelection)
                    Slider(value: $sliderSelection, in: 0...100)
                    Picker("Select province", selection: $pickerSelection) {
                        ForEach(itemsPicker, id: .self) {
                            Text($0)
                        }
                    }.navigationBarTitleDisplayMode(.inline)
                }
                Section(header: Text("Second section")) {
                    ColorPicker("Select Color", selection: $colorSelection)
                    DatePicker("Select date", selection: $datePickerSelection)
                    Toggle("Enabled", isOn: $toggleSelection)
                    Button("Done") {
                        //Do something
                    }
                    .disabled(!toggleSelection)
                }
                .listRowBackground(Color.yellow.opacity(0.3))
                
                Section() {
                    HStack {
                        Text("Version")
                        Spacer()
                        Text("1.0.0")
                    }
                }
            }
            .navigationBarTitle("Form", displayMode: .automatic)
            .navigationColor(background: UIColor(red: 31/255, green: 155/255, blue: 222/255, alpha: 1), title: .white)
        }
    }
}

Modificadores comunes para Form

El componente Form comparte los mismos métodos de personalización que el componente View y pueden ser consultados en este enlace.

También se comporta de forma similar al componente List por lo que algunos de sus modificadores afectan a la personalización visual de Form.

listRowBackground

Este modificador se debe aplicar a las celdas del componente List. Si se aplica sobre Form no tiene ningún efecto. Permite modificar el color de fondo de toda la celda. Para este caso el modificador background no nos sirve ya que pondría el color de fondo al componente pero no a la celda.

Form {
    Section() {
        Text("Hello, World!")
            .listRowBackground(Color.red.opacity(0.3))
        HStack {
            Text("Version")
            Spacer()
            Text("1.0.0")
        }
        Button("Done") {
            //Do something
        }
    }
    .listRowBackground(Color.yellow.opacity(0.3))
}

Ejemplo

Puedes encontrar este ejemplo en https://github.com/SDOSLabs/SwiftUI-Test bajo el apartado List.

Rafael Fernández,
iOS Tech Lider