En el tutorial anterior de SwiftUI vimos cómo crear una tabla o lista con SwiftUI. En este tutorial veremos cómo crear una vista de lista o tabla con texto e imágenes. En muchos casos, los elementos de una vista de lista contendrán texto e imágenes. ¿Cómo podemos crearla? Si está familiarizado con Image, Text, VStack y HStack, debería tener algunas ideas sobre cómo crear una lista con texto e imágenes.
Para crear una tabla con UIKit, debes crear una vista de tabla o un controlador de vista de tabla y luego personalizar la celda del prototipo. Además, debe programar la fuente de datos de la vista de tabla para proporcionar los datos. Hay algunos pasos para crear una interfaz de usuario de tabla. Ahora veamos cómo podemos implementar la misma vista de tabla en SwiftUI.
Lo primero que debemos hacer es importar las imágenes que queremos usar en nuestra aplicación al asset catalog.
Lo primero que vamos a hacer es declarar dos arrays de nueve elementos en ContenView. Estos arrays se utilizarán para almacenar los nombres y las imágenes de los restaurantes. Aquí puedes ver el código completo:
struct ContentView: View {
var body: some View {
var restaurantNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "Petite Oyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh's Chocolate"]
var restaurantImages = ["cafedeadend", "homei", "teakha", "cafeloisl", "petiteoyster", "forkeerestaurant", "posatelier", "bourkestreetbakery", "haighschocolate"]
}
}Ambos arrays tienen la misma cantidad de elementos. El array restaurantNames almacena los nombres de los restaurantes mientras que el array restaurantImages almacena los nombres de las imágenes que importamos al catálogo de recursos. Para crear una lista con texto e imágenes tendremos que actualizar el ContentView con el siguiente código:
struct ContentView: View {
var body: some View {
var restaurantNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "Petite Oyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh's Chocolate"]
var restaurantImages = ["cafedeadend", "homei", "teakha", "cafeloisl", "petiteoyster", "forkeerestaurant", "posatelier", "bourkestreetbakery", "haighschocolate"]
List(restaurantNames.indices, id: \.self) { index in
HStack {
Image(restaurantImages[index])
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(restaurantNames[index])
}
}
.listStyle(.plain)
}
}Realizamos algunos cambios en el código. Primero, en lugar de un rango fijo, pasamos el array de nombres de restaurantes (es decir, restaurantNames.indices) a la vista de lista. El array restaurantNames tiene 9 elementos, por lo que tendremos un rango de 0 a 8 (las matrices tienen un índice de 0). Este enfoque funciona cuando ambas matrices tienen el mismo tamaño, ya que el índice de una matriz se usa como índice para la otra matriz.
En el cierre, se actualizó el código para crear el diseño de filas. Para cambiar el estilo de la vista de lista, aplicamos el modificador listStyle y configuramos el estilo como simple.
El resultado del código ejecutado es el siguiente:
Trabajando con colecciones de datos
Como mencionamos antes, List puede abarcar un rango o conjunto de datos. Ahora veamos cómo usar List con un array de objetos de restaurante.
En lugar de almacenar los datos del restaurante en dos arrays separados, crearemos una estructura Restaurant para organizar mejor los datos. Esta estructura tiene dos propiedades: nombre e imagen. Inserte el siguiente código al final de ContentView.swift
struct Restaurant{
var name: String
var image: String
}Con esta estructura podemos combinar tanto restaurantNames como restaurantImages en un único array. Borra las variables restaurantNames y restaurantImages y reemplácelas con esta variable en ContentView:
var restaurants = [ Restaurant(name: "Cafe Deadend", image: "cafedeadend"),
Restaurant(name: "Homei", image: "homei"),
Restaurant(name: "Teakha", image: "teakha"),
Restaurant(name: "Cafe Loisl", image: "cafeloisl"),
Restaurant(name: "Petite Oyster", image: "petiteoyster"),
Restaurant(name: "For Kee Restaurant", image:
"forkeerestaurant"),
Restaurant(name: "Po's Atelier", image: "posatelier"),
Restaurant(name: "Bourke Street Bakery", image: "bourkestreetbakery"),
Restaurant(name: "Haigh's Chocolate", image: "haighschocolate")]Cada elemento del array representa un objeto de restaurante que contiene tanto el nombre del restaurante como la imagen. Una vez que actualices el código en XCode, verás un error que indica que falta la variable restaurantNames. Esto es lo esperado porque la acabamos de eliminar. Ahora actualiza la variable body de esta manera:
struct ContentView: View {
var body: some View {
var restaurants = [ Restaurant(name: "Cafe Deadend", image: "cafedeadend"),
Restaurant(name: "Homei", image: "homei"),
Restaurant(name: "Teakha", image: "teakha"),
Restaurant(name: "Cafe Loisl", image: "cafeloisl"),
Restaurant(name: "Petite Oyster", image: "petiteoyster"),
Restaurant(name: "For Kee Restaurant", image: "forkeerestaurant"), Restaurant(name: "Po's Atelier", image: "posatelier"), Restaurant(name: "Bourke Street Bakery", image: "bourkestreetbakery"), Restaurant(name: "Haigh's Chocolate", image: "haighschocolate")]
var restaurantImages = ["cafedeadend", "homei", "teakha", "cafeloisl", "petiteoyster", "forkeerestaurant", "posatelier", "bourkestreetbakery", "haighschocolate"]
List(restaurants, id: \.name) { restaurant in
HStack {
Image(restaurant.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(restaurant.name)
}
}
.listStyle(.plain)
}
}El resultado del código sería el siguiente:
Observa los parámetros que pasamos a List. En lugar de pasar el rango, ahora pasamos el array de restaurantes y especificamos la propiedad de nombre como identificador para cada restaurante. List iterará a través del array y nos dará el restaurante actual que se está procesando.
Dentro del cierre, definimos cómo queremos presentar cada fila de restaurante. En este caso, usamos un HStack para mostrar tanto la imagen como el nombre del restaurante.
La interfaz de usuario resultante permanece sin cambios, pero el código subyacente se modificó para aprovechar List con una colección de datos.
