[SUI] Sheets

#swift #ios #swiftui

Para presentar una vista de forma modal:

sheet(isPresented:onDismiss:content:): isPresented es un Binding<Bool>. onDismiss es un closure que se ejecuta cuando se cierra el modal. content es el contenido del modal.
sheet(item:onDismiss:content:): content pinta el contenido del modal, recibiendo un argumento de tipo Item (requerido). item es un Binding<Item?> opcional que sirve como argumento de content: si es nil se cierra el modal, si es distinto de nil se pinta el modal, y si se cambia el valor de item entonces se cierra y vuelve a abrir el modal. onDismiss es una acción a ejecutar cuando se cierra el modal.

Para presentar una vista de pantalla completa se usa:

fullScreenCover(isPresented:onDismiss:content:): isPresented es un Binding<Bool>.
fullScreenCover(item:onDismiss:content:): item es un Binding<Item?>.

Tener en cuenta que las vistas presentadas con sheet o fullScreenCover no hacen parte del stack del NavigationStack.

struct DetailView: View {
  let person: Person

  var body: some View {
    VStack {
      Text("Esta es la vista detalle para el siguiente personaje:")
      Text("\(person.name) \(person.lastname)")
    }
    .navigationTitle("Detalle")
    .navigationBarTitleDisplayMode(.inline)
  }
}

struct PersonForm: View {
  // ⚠️ Se recibe la "base de datos" por Binding
  @Binding var people: [Person]
  @State private var name: String = ""
  @State private var lastname: String = ""
  @Environment(\.dismiss) private var dismissAction

  var body: some View {
    Form {
      TextField("Nombre", text: $name)
      TextField("Nombre", text: $lastname)
      Button("Guardar") {
        // ⚠️ Se crea el nuevo Person
        let newPerson = Person(name: name, lastname: lastname)
        // ⚠️ Se agrega en la "base de datos"
        people.append(newPerson)
        // ⚠️ Se cierra el formulario con dismissAction()
        dismissAction()
      }
    }
  }
}

struct ContentView: View {

  @State private var searchText: String = ""
  @State private var navigationPath = NavigationPath()
  @State private var _people = people
  @State private var formVisible = false

  private var filteredPeople: [Person] {
    if searchText.isEmpty {
      _people
    } else {
      _people.filter {
        $0.name.localizedStandardContains(searchText) }
    }
  }

  var body: some View {
    NavigationStack(path: $navigationPath) {
      List(filteredPeople) { person in
        NavigationLink(value: person) {
          Label("\(person.name) \(person.lastname)", systemImage: "person")
        }
      }
      .navigationDestination(for: Person.self, destination: { person in
        DetailView(person: person)
      })
      .navigationTitle("Personas")
      .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .automatic), prompt: "¿A quién busca?")
      .toolbar {
        ToolbarItem(placement: .topBarTrailing) {
          Button("Nuevo", systemImage: "plus") {
            // ⚠️ Se pone formVisible=true para mostrar el sheet
            formVisible = true
          }
        }
      }
      // ⚠️ el sheet (PersonForm) es visible si formVisible=true
      .sheet(isPresented: $formVisible) {
        // Se crea la instancia de PersonForm y se pasa la
        // "base de datos"
        PersonForm(people: $_people)
      }
    }
  }
}