La vue TextField permet de saisir du texte.
Dans cette fiche :
Le premier paramètre de TextField permet de spécifier le libellé. Sous iOS, ce libellé sera inscrit dans la boîte de saisie, comme un filigrane (en anglais : watermark ou placeholder). Ce n'est que sous macOS qu'il est placé comme les libellés qu'on a l'habitude de voir dans un formulaire Web, c'est-à-dire à gauche de la case de saisie.
Le second paramètre est le nom de la variable dans laquelle la valeur saisie sera stockée. Ce doit être une variable avec liaison (binding), donc précédée par un signe $, afin que la valeur entrée dans le TextField modifie cette variable et vice-versa. Ce peut être par exemple une variable déclarée avec l'attribut @State.
struct ContentView: View {
@State private var nom: String = ""
var body: some View {
...
TextField("Nom", text: $nom)
...
}
}
Vous l'avez sans doute remarqué, par défaut, l'apparence n'est pas très intéressante.
Le modifieur textFieldStyle() permet d'ajuster l'apparence du TextField.
TextField("Nom", text: $nom)
.textFieldStyle(.roundedBorder)
.padding()
J'ai ajouté un modifieur padding() afin que le TextField ne soit pas collé sur les bord de l'écran.
Plutôt qu'une bordure grise, il est possible de définir une bordure personnalisée selon nos besoins.
La technique consiste à utiliser le modifieur overlay qui permet de définir une vue à placer par-dessus le TextField.
TextField("Nom", text: $nom)
.padding(7)
.overlay {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.accentColor, lineWidth: 2)
}
.padding()
Bien que ceci ne soit pas obligatoire, il est possible de placer le TextField dans une structure Form afin d'améliorer le visuel.
Remarquez que lorsqu'on utilise un Form, l'apparence est agréable même sans modifeur.
Form {
TextField("Nom", text: $nom)
}
Il faut toujours avoir un libellé autre que le filigrane.
En effet, l'utilisation d'un filigrane comme seul libellé n'est pas ergonomique puisqu'une fois le formulaire rempli, on ne verra plus ce qui était attendu dans chacune des cases.
Ceci serait problématique par exemple dans un formulaire qui doit saisir un prénom et un nom de famille. Devait-on entrer le nom de famille en premier ou le prénom?
D'ailleurs, on voit dans les applications de Apple qu'il y a généralement autre chose que le filigrane pour identifier une case de saisie, tel qu'illustré dans cette vue dans les réglages.
Afin de s'assurer que l'application soit ergonomique, il est possible de forcer l'affichage d'un libellé en utilisant des sections.
Remarquez qu'ici, je n'ai rien spécifié comme filigrane. J'aurais pu utiliser un filigrane pour donner de l'information complémentaire sur ce qui est attendu, par exemple le format d'un numéro de téléphone ou encore le fait que l'information soit requise ou non.
Form {
Section(header: Text("Nom")) {
TextField("", text: $nom)
}
Section(header: Text("Âge")) {
TextField("", text: $ageString)
.keyboardType(.numberPad)
}
}
Autre technique : définir le libellé à l'aide d'un Text placé à gauche du TextField.
Form {
HStack {
Text("Nom")
TextField("", text: $nom)
}
HStack {
Text("Âge")
TextField("", text: $ageString)
.keyboardType(.numberPad)
}
}
Afin de reproduire l'apparence des réglages du iPhone, il suffit d'ajouter une largeur aux libellés et de préciser qu'ils doivent être alignés à gauche.
let largeurLibelles = 60.0
...
Form {
HStack {
Text("Nom")
.frame(width: largeurLibelles, alignment: .leading)
TextField("", text: $nom)
}
HStack {
Text("Âge")
.frame(width: largeurLibelles, alignment: .leading)
TextField("", text: $ageString)
.keyboardType(.numberPad)
}
}
Pour une apparence plus sophistiquée, vous pouvez vous tourner vers des libellés flottants, c'est-à-dire que le libellé apparaît comme un filigrane au départ et qu'il se déplace en haut de la valeur saisie dès qu'on commence à entrer du texte.
Contrairement à Google avec Material Design, Apple a choisi de ne pas fournir de vue qui permet de générer un libellé flottant. C'est que ce type d'utilisation est controversé bien que plusieurs arguments des détracteurs soient discutables.
Si vous souhaitez utiliser des libellés flottants, vous devrez ajouter un peu de code à votre application.
Vous pouvez par exemple baser votre travail sur ceci : https://github.com/kishanraja/FloatingLabelTextFieldSwiftUI
ou sur ceci : https://levelup.gitconnected.com/swiftui-floating-label-text-field-af04c2eb1a2b
Il est possible de modifier l'alignement du filigrane, et par le fait même du texte qui sera entré dans le TextField.
Ceci est réalisé à l'aide du modifieur multilineTextAlignment().
Form {
TextField("Nom", text: $nom)
.multilineTextAlignment(.trailing)
}
Voir la fiche « Bouton pour traiter le formulaire .
Voir la fiche « Configurer le clavier du téléphone ».
« TextField in SwiftUI ». Swift with Majid. https://swiftwithmajid.com/2020/02/26/textfield-in-swiftui/
« TextField in SwiftUI ». Stefan Blos. https://stefanblos.com/posts/textfield-in-swiftui/
« Custom TextField in SwiftUI ». The Happy Programmer. https://thehappyprogrammer.com/custom-textfield-in-swiftui
« SwiftUI Form tutorial for beginners ». Programming with Swift. https://programmingwithswift.com/swiftui-form-beginners-guide/
▼Publicité
