FORMS en SWIFTUI en Español

Form en SwiftUI

Forms en SwiftUI es una vista que nos permite crear vistas con aspecto de formularios o como las típicas pantallas de ajustes dentro de las apps.
Dentro del Form podemos crear distintas secciones para estructurar mejor su información pudiendo dar un texto al header o footer de cada una de las secciones.

Form en código

Vamos a crear la típica pantalla de settings de una app. Para ello veremos vistas que hemos ido viendo en los últimos posts: Stepper, ColorPicker, Toggle, etc.

struct ContentView: View {
    
    @State var isNetworkOn: Bool = false
    @State var name: String = "iPhone 12 Pro Max"
    @State var favoriteColor: Color = Color.blue
    @State var birthday: Date = Date()
    @State var numDevices: Float = 1.0
    @State var contactMessage: String = ""
    
    var body: some View {
        Form {
            Section(header: Text("Settings")) {
                TextField("Device Name", text: $name)
                Toggle("Wi-Fi", isOn: $isNetworkOn)
            }
            
            Section(header: Text("Account")) {
                DatePicker("Birthday", 
                		   selection: $birthday)
                ColorPicker("Favorite Color", 
                            selection: $favoriteColor)
                Stepper("Number of devices: \(Int(numDevices))", 
                        value: $numDevices)
            }
            
            Section(header: Text("Contact"),
                    footer:
                        HStack {
                            Spacer()
                            Label("version 1.0", 
                                  systemImage: "iphone")
                            Spacer()
                        }) {
                TextEditor(text: $contactMessage)
                HStack {
                    Spacer()
                    Button("Send") {
                        print("Message \(contactMessage)")
                    }
                }
            }
        }
    }
}

Código de Form en SwiftUI con diferentes secciones

En el código anterior hemos creado una vista de un Form con 3 secciones:
Primera Sección: Settings con un TextField y un Toggle
Segunda Sección: Account, con un DatePicker, ColorPicker y Stepper
Tercera Sección: Contact, con un TextEditor y un Button. En este caso hemos añadido un Text en el footer para simular la versión de nuestra app.

Para crear secciones solo debemos poner Section y inicializarlo con un header o footer. De esta manera podemos crear Forms bien structurados.

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter