FORMS en SWIFTUI en Español
Form en SwiftUI o Formularios en SwiftUI

FORMS en SWIFTUI en Español

Form en SwiftUI 2.0 es una vista que nos ayuda a crear formularios dentro de nuestras app de una manera super sencilla. Podemos distribuir el contenido del Form en distintas secciones.

SwiftBeta
Aprende SwiftUI desde cero

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

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero