Dans cette fiche :
Un bouton peut prendre n'importe quelle apparence.
Je vous présente ici quelques exemples.
Dans les premiers exemples, le bouton ne fait rien. Je vous montre plus bas comment spécifier l'action qu'il doit réaliser.
Au plus simple, le bouton sera un texte cliquable.
Button("Cliquez ici") {
// traitement ici
}
Vous verrez souvent une syntaxe qui utilise un libellé pour identifier certains paramètres.
Button("Cliquez ici", action: {
// traitement ici
})
Le même résultat peut être obtenu avec ceci :
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
}
Il existe quelques styles prédéfinis qui permettent d'obtenir rapidement un bouton plus intéressant.
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
}
.buttonStyle(.bordered)
Le bouton peut avoir un rôle qui aura un impact sur son apparence.
Dans certains contextes, le rôle influencera même la position du bouton par rapport aux autres boutons afin d'assurer une meilleure cohésion entre les applications.
Voici un exemple de bouton avec le rôle .destructive, qui devrait être utilisé lorsque le bouton permet de supprimer des données ou d'effectuer une opération irréversible.
Button(
role: .destructive,
action: {
// traitement ici
}) {
Text("Cliquez ici")
}
.buttonStyle(.bordered)
Il est possible d'ajouter des modifieurs pour donner au texte l'apparence de notre choix.
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
.padding()
.foregroundColor(Color.white)
.background(Color.orange)
.cornerRadius(15.0)
}
Dans la majorité des cas, il faut appliquer les modifieurs à ce qui définit l'apparence du bouton (ici : Text()).
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
.padding(50)
.foregroundColor(Color.white)
.background(Color.orange)
.cornerRadius(15.0)
}
Si vous appliquez les modifieurs au bouton, il pourrait arriver que le bouton ne soit pas entièrement cliquable.
Dans cet exemple, puisque le bouton comprend un gros padding, seule la partie centrale du bouton pourra être cliquée.
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
}
Ces deux syntaxes sont équivalementes et causent le même problème.
Button("Cliquez ici", action: {
// traitement ici
})
Par contre, certains modifieurs devront impérativement être appliqués au bouton, par exemple si vous désirez modifier la position par programmation.
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
.padding(50)
.foregroundColor(Color.white)
.background(Color.orange)
.cornerRadius(15.0)
}
.position(positionX, positionY)
Autre exemple avec un ombrage :
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
.padding()
.frame(height: 100)
.foregroundColor(Color.white)
.font(.title)
.background(Color.red)
.cornerRadius(15.0)
.shadow(color: Color.gray, radius: 2, x: CGFloat(2), y: CGFloat(2))
}
Autre exemple avec un dégradé :
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
.padding()
.foregroundColor(.black)
.background(LinearGradient(gradient: Gradient(colors: [.white, .gray]), startPoint: .top, endPoint: .bottom))
.border(Color(red: 0.9, green: 0.9, blue: 0.9), width: 1)
}
Le bouton peut aussi être sous forme d'image.
Ici, j'ai choisi de placer du texte par-dessus l'image et d'utiliser des modifieurs pour obtenir un résultat plus esthétique. Bon, on s'en reparlera pour l'esthétisme, ça parait que je ne suis pas graphiste ;-)
Button(action: {
// traitement ici
}) {
ZStack {
Image("texture")
.frame(width: 140, height: 45)
.cornerRadius(10)
Text("Cliquez ici")
.fontWeight(.bold)
.foregroundColor(.white)
.shadow(color: Color.black, radius: 5)
}
}
L'action du bouton peut être spécifiée dans une fonction anonyme ou encore dans une fonction nommée.
Button("Cliquez ici", action: {
if reponse == reponseValide {
...
}
})
ou
Button("Cliquez ici", action: {traiterReponse()})
Lorsque le traitement consiste à appeler une seule fonction et que cette fonction ne reçoit pas de paramètre, il est possible de laisser tomber les accolades de l'action ainsi que les parenthèses de la fonction.
Button("Cliquez ici", action: traiterReponse)
Un bouton peut être désactivé à l'aide du modifieur .disabled().
Ce modifieur prend en paramètre une condition qui, si elle est évaluée à true, rendra le bouton inactif.
@State private var desactiverBouton: Bool = false
...
Button(action: {
// traitement ici
}) {
Text("Cliquez ici")
}
.buttonStyle(.bordered)
.disabled(desactiverBouton)
|
|
|
| Bouton activé | Bouton désactivé |
« Button ». Apple. https://developer.apple.com/documentation/swiftui/button
« Mastering SwiftUI Buttons: How to Create and Customise Button ». SwiftyPlace. https://www.swiftyplace.com/blog/mastering-swiftui-buttons-a-comprehensive-guide-to-creating-and-customizing-buttons
▼Publicité
