ContentUnavailableView para crear un Empty State con SwiftUI

Marcelo Laprea

13 junio, 20232min de lectura

En la WWDC 2023 Apple introdujo una nueva vista en SwiftUI llamada ContentUnavailableView a partir de iOS 17, la cual nos permite crear estados vacíos. Veamos un ejemplo de como crear la vista:

ContentUnavailableView {
    Label("Título", systemImage: "imagen")
} description: {
    Text("Descripción")
} actions: {
    Button {
        print("Acción")
    } label: {
        Text("Crear comida")
    }
}

1. Definimos un Label con un título y una imagen.
2. Añadimos una descripción, siendo este opcional.
3. Añadimos la acción que queremos ejecutar, en este caso un botón, siendo también opcional.

Añadiendo ContentUnavailableView en nuestra vista

Imagina que obtenemos un listado de comidas del servidor, y este llega vacío por algún error en la llamada o porque realmente no tenemos comidas agregadas en nuestra lista. Creamos nuestro listado de comidas, y añadimos la vista ContentUnavailableView dentro de un modificador overlay, con la condición de que la vista sea mostrada en caso de que nuestra variable foods esté vacía.

Luego le añadimos al ContentUnavailableView un Label con un título y la imagen que queremos representar, seguido de una descripción para indicarle al usuario que está pasando.

import SwiftUI

struct ContentView: View {
  var foods: [String] = []

  var body: some View {
    List {
      ForEach(foods, id: \.self) { food in
        Text(food)
      }
    }
    .overlay {
      if foods.isEmpty {
        ContentUnavailableView {
            Label("Sin comidas", systemImage: "carrot.fill")
        } description: {
            Text("Empieza a crear comidas para verlas en tu lista")
        }
      }
    }
  }
}

Veamos como queda la vista:

Diferentes formas de crear un ContentUnavailableView

1. Añadiendo un Label, descripción y acción tal como vimos en la primera sección del artículo.
2. Con la opción que nos da Apple para crear un estado vacío para una búsqueda fallida. ContentUnavailableView.search.

3. La misma opción anterior, pero añadiendo el término de búsqueda no encontrado ContentUnavailableView.search(text: "AsyncLearn").

Gracias a esta nueva vista que nos proporciona Apple podemos crear estados vacíos o "empty states" de una manera sencilla y rápida, mejorando la experiencia de los usuarios en nuestra app.