La méthode alert() permet d'afficher une alerte sous forme de boîte popup.
Son principe est le suivant : on appelle la méthode en fournissant notamment une valeur au paramètre isPresented. La valeur de ce paramètre doit provenir d'une variable avec liaison, donc précédée par un signe $. Ce peut être par exemple une variable déclarée avec l'attribut @State.
Le popup s'affichera seulement quand ce paramètre prendra la valeur true.
Par défaut, le message s'affichera dans une boîte avec un bouton OK qui permet de la refermer.
struct ContentView: View {
@State private var afficherAlerte: Bool = false
var body: some View {
Button("Commander") {
afficherAlerte = true
}
.alert("Votre commande a été enregistrée!", isPresented: $afficherAlerte) {
}
}
}
ou, si votre bouton utilise cette autre syntaxe :
Button(action: {
afficherAlerte = true
}) {
Text("Commander")
}
.alert("Votre commande a été enregistrée!", isPresented: $afficherAlerte) {
}
Il est possible de changer le texte de ce bouton en définissant un autre bouton dont le rôle est .cancel.
Button("Supprimer") {
afficherAlerte = true
}
.alert("Des frais de livraison seront ajoutés à votre facture.", isPresented: $afficherAlerte) {
Button("Je comprends", role: .cancel) {
}
}
Au besoin, vous pouvez ajouter du code qui sera exécuté lors du clic sur le bouton.
Button(action: {
if ... {
termine = true
}
}) {
Text("Soumettre")
}
.alert("Partie terminée!", isPresented: $termine) {
Button("OK", role: .cancel) {
reinitialiserPartie()
}
}
L'alerte peut contenir autant de boutons que désiré. Si vous ne définissez aucun bouton avec le rôle .cancel, un bouton OK sera automatiquement ajouté.
Lorsqu'une fenêtre popup est utilisée pour poser une question, il est important de montrer clairement à l'usager qu'il peut accepter (ex : bouton OK ou Oui) ou refuser (ex : bouton Annuler ou Non) ce qui lui est demandé.
Notez que le bouton .cancel sera toujours situé à gauche, peu importe dans quel ordre vous avez placé les boutons.
Button("Supprimer") {
afficherAlerte = true
}
.alert("Désirez-vous vraiment supprimer cet item?", isPresented: $afficherAlerte) {
Button("Oui") {
// code pour effectuer le traitement
}
Button("Non", role: .cancel) {
}
}
Attention : la Structure Alert ne doit plus être utilisée. Elle est obsolète depuis iOS 13.0 et macOS 10.15.
Button("Supprimer") {
afficherAlerte = true
}
.alert(isPresented: $afficherAlerte) {
}
Depuis iOS 16, .alert() permet de saisir de l'information, par exemple à l'aide d'un TextField.
Il n'est pas possible de monter une vue complexe mais l'ajout de quelques TextFields est accepté.
Si vous avez besoin d'un texte supplémentaire, vous pouvez utiliser la syntaxe avec un message.
.alert("Partie terminée!", isPresented: $afficherAlerte) {
TextField("", text: $nom)
Button("Enregistrer") {
// code pour effectuer le traitement
}
Button("Ne pas enregistrer", role: .cancel) {
}
}
message: {
Text("Entrez votre nom.")
}
L'exemple classique est d'utilise .alert() avec un bouton comme dans les exemples plus haut. Mais sachez qu'une alerte peut également être utilisée avec autre chose, par exemple un VStack ou un NavigationStack.
VStack {
...
Button(action: {
if ... {
message = "Réussi"
}
else {
message = "Raté"
}
afficherAlerte = true
}) {
Text("Tester")
}
}
.alert(message, isPresented: $afficherAlerte) {
}
« Alerts ». Apple developer. https://developer.apple.com/design/human-interface-guidelines/alerts
« alert(_:isPresented:presenting:actions:message:) ». Apple. https://developer.apple.com/documentation/swiftui/view/alert(_:ispresented:presenting:actions:message:)-8584l
« iOS 15 Alerts in SwiftUI ». YouTube - Stewart Lynch . https://www.youtube.com/watch?v=NC_c7WfSRTk
▼Publicité
