[SUI] Alertas

#swiftui #swift #ios

Se puede usar una alerta para pedir confirmación de parte del usuario.

alert(_:isPresented:actions:message:). title es el título de la alerta. message es un ViewBuilder que devuelve el mensaje de la alerta. actions es un ViewBuilder que devuelve las acciones de la alerta.

struct ContentView: View {
  @State var isPresented: Bool = false
  var body: some View {
    VStack {
      Text("Hola mundo")
      Button("Abrir alerta") {
        isPresented = true
      }
    }
    .alert("Error", isPresented: $isPresented) {
      Button("OK") {
        // ⚠️ Al presionar cualquier acción, automáticamente 
        // se cierra la alerta
      }
    } message: {
      HStack {
        Toggle("Toggle", isOn: .constant(true))
        Text("El mensaje debe ser solo texto. El toggle no aparece. Además, solo se muestra la primera vista: o sea, Toggle")
        Label("Hola", systemImage: "pencil")
      }
    }
  }
}

El rol es importante dentro de la alerta. Notar que si solo pongo una acción de tipo "destructiva", entonces "por arte de magia" aparece una acción para cancelar.

struct ContentView: View {
  @State var isPresented: Bool = false
  var body: some View {
    VStack {
      Text("Hola mundo")
      Button("Abrir alerta") {
        isPresented = true
      }
    }
    .alert("Error", isPresented: $isPresented) {
      Button("OK", role: .destructive) {

      }
    } message: {
      HStack {
        Toggle("Toggle", isOn: .constant(true))
        Text("El mensaje debe ser solo texto. El toggle no aparece. Además, solo se muestra la primera vista: o sea, Toggle")
        Label("Hola", systemImage: "pencil")
      }
    }
  }
}

El número de acciones influye en la disposición de los botones. En el siguiente ejemplo notar que la acción 4 se agregó después de la acción 1, pero en el simulador se muestra al final:

.alert("Error", isPresented: $isPresented) {
  Button("Acción 1", role: .confirm) {

  }

  Button("Acción 4", role: .cancel) {

  }

  Button("Acción 2", role: .close) {

  }

  Button("Acción 3", role: .destructive) {

  }
} message: {
  Text("El mensaje debe ser solo texto. El toggle no aparece. Además, solo se muestra la primera vista: o sea, Toggle")
}