[SUI] Popover

#swiftui #swift #ios

"Popover" es una pequeña vista presentada en algún punto de la pantalla de MacOS y iPadOS, y como un sheet en iOS. Para esto se usa el modificador popover(isPresented:attachmentAnchor:arrowEdge:content:).

El argumento attachmentAnchor es de tipo PopoverAttachmentAnchor, y tiene los métodos PopoverAttachmentAnchor.point(_:) y PopoverAttachmentAnchor.rect(_:) para anclar el popover a la pantalla. El valor por defecto es .rect(.bounds)
El argumento arrowEdge es de tipo Edge e indica el lado del popover donde aparecerá la flecha.

struct ContentView: View {
  @State var isPresented: Bool = false
  var body: some View {
    VStack {
      Text("Hola mundo")
      Button("Abrir popover") {
        isPresented = true
      }
    }
    .popover(isPresented: $isPresented, attachmentAnchor: .point(.init(x: 0.5, y: 0)), arrowEdge: .leading, content: {
      VStack {
        Text("Soy el popover")
        Button("Cerrar") {
          isPresented = false
        }
      }
      .padding()
    })
  }
}

En el ejemplo anterior, arrowEdge: .leading provoca que la flecha del "popover" esté a la izquierda; attachmentAnchor: .point(.init(x: 0.5, y: 0)) fija la punta de la flecha del popover en el borde centro-arriba de VStack.

Además, a pesar de que se puso un botón dentro del popover para cerrarlo, también es posible hacerlo pulsando fuera de él, en cualquier parte de la pantalla. En caso de que el popover fuera una vista aislada en otra estructura, se puede hacer uso de la variable de ambiente dismiss.

Así como "sheet" y sus demás primos cercanos, "popover" tiene una versión que recibe un Binding<Item?> hacia un item opcional: popover(item:attachmentAnchor:arrowEdge:content:).