Como crear una tabla en SwiftUI

En UIKit, UITableView es uno de los controles de UI más comunes en iOS. Si tienes experiencia desarrollando apps en UIKit, estás familiarizado con el uso de table views para presentar listas de datos. Este UI control es comúnmente usado en apps basadas en contenido. Algunas apps populares que hacen uso de listas o table views son Instagram, X, Airbnb o Apple News.

En lugar de utilizar UITableView, utilizamos List en SwiftUI para presentar filas de datos. Si ya has creado una vista de tabla con UIKit, sabrás que puede requerir un esfuerzo considerable implementar una vista de tabla simple y aún más esfuerzo personalizar el diseño de las celdas.

SwiftUI simplifica el proceso entero. Con solo unas líneas de código puedes mostrar datos en formato de tabla.

Incluso si necesitas personalizar el diseño de las filas, solo requiere un esfuerzo mínimo.

¿Te sientes confundido? No te preocupes. Entenderás lo que quiero decir en un momento.

En este tutorial de SwiftUI, comenzaremos con una lista simple. Una vez que comprendas los conceptos básicos, te mostraré cómo presentar una lista de datos con un diseño más complejo.

Vamos a empezar con una lista simple. Abre XCode y crea un nuevo proyecto usando la App template. En la próximo pantalla pon como nombre SwiftUIList (o el nombre que quieras) and rellena todos los campos requeridos. Además, selecciona SwiftUI como opción de Interface.

XCode generará el código de “Hello World” en ContentView.swift. Reemplaza el contenido de ContentView.swift por este:

struct ContentView: View {
    var body: some View {
        List {
            
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

El resultado sería el siguiente:

Este es todo el código que necesitas para crear una lista simple o tabla. Cuando se integran las vistas de texto en una List, la vista de lista presentará los datos en filas. Aquí, cada fila muestra una vista de texto con una descripción diferente.

Como crear una tabla con ForEach

El mismo snippet de código puede ser escrito de la siguiente forma usando ForEach:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1...3, id: \.self) { index in
                
                Text("Item \(index)")
            }
        }
    }
}

Ya que las vistas de texto son muy similares, puede usar ForEach en SwiftUI para crear vistas en un loop.

Puede proporcionar a ForEach una colección de datos o un rango. Sin embargo, es importante informar a ForEach cómo identificar de forma única cada elemento de la colección. Esto se logra a través del parámetro id. 

¿Por qué ForEach necesita este identificador? SwiftUI tiene la capacidad de actualizar automáticamente la UI cuando algunos o todos los elementos de la colección cambian. Para lograr esto, necesita un identificador único para rastrear y actualizar los elementos con precisión.

En el fragmento de código anterior, pasamos un rango de valores a ForEach para iterar. El identificador se establece en el valor en sí (es decir, 1, 2, o 3). El parámetro index contiene el valor actual del bucle. Por ejemplo, si comienza con un valor de 1, el parámetro index será 1.

Dentro del cierre, se define el código que representa las vistas. En este caso, creamos una vista de texto con una descripción que varía según el valor del índice en el bucle. Así es como creamos tres elementos en la lista con diferentes títulos.

Ahora, déjame mostrarte una técnica alternativa. El mismo fragmento de código se puede simplificar aún más de la siguiente manera:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1...3, id: \.self) {
                
                Text("Item \($0)")
            }
        }
    }
}

Puedes omitir el parámetro index y usar $0, que se refiere al primer parametro del bucle.

Vamos a simplificar más el código directamente pasando una colección de datos a List. Aquí está el código actualizado:

struct ContentView: View {
    var body: some View {
        List(1...3, id: \.self)
        {
            
            Text("Item \($0)")
            
        }
    }
}

Como has podido ver es muy fácil y simple crear una tabla o table view en SwiftUI usando List.