La structure Form permet de modifier l'apparence d'un formulaire.
Il s'agit d'un conteneur spécialisé, basé sur List, qui applique automatiquement au formulaire un style prédéfini.
Il est cependant tout à fait possible de définir un formulaire sans Form.
Dans cette fiche :
Form {
TextField("Nom", text: $nom)
}
Le modifieur .contentMargins() permet d'ajuster la marge entre le contenu du Form et ses bordures.
Dans cet exemple, le Form est placé dans un NavigationStack avec titre. Par défaut, l’espacement sous le titre est minimal.
Avec le .contentMargins(), on a un plus grand contrôle sur l'espacement.
NavigationStack {
Form {
TextField("Nom", text: $nom)
}
.contentMargins(.top, 20)
.navigationTitle("Mon application")
}
Par défaut, un Form s'étend pour occuper tout l'espace disponible à l'écran.
Il est généralement recommandé de conserver ce comportement.
Si vous devez absolument limiter sa hauteur, le modifieur .frame() permet d'ajuster la taille du Form.
Form {
TextField("Nom", text: $nom)
}
.frame(maxHeight: 150)
Le Form sera alors centré verticalement dans l’espace disponible. Au besoin, il est possible d’utiliser un VStack et un Spacer() pour le maintenir en haut de l’écran.
Attention : en limitant la taille avec .frame(), le formulaire se transformera en zone de défilement si son contenu est plus grand que l'espace alloué. Ce comportement peut être déroutant pour l'usager.
Puisque Form est basé sur List, il faut prendre une précaution particulière pour placer plus d'un bouton sur une même ligne du formulaire.
Le problème, c'est que par défaut, dans une liste, SwiftUI étire la zone cliquable des boutons sur toute la largeur de l'écran. Un seul bouton par ligne est donc cliquable.
Ce comportement est pratique : il permet de cliquer n'importe où sur la ligne pour réaliser l'action du bouton.
Dans cet exemple, SwiftUI ne parvient pas à distinguer les zones de clic, ce qui rend le comportement imprévisible.
Form {
HStack(spacing: 12) {
}
}
Il s'agit d'un problème connu dont la solution est facile à mettre en place, à condition de la connaître ;-)
Il suffit de limiter la taille des boutons à l'aide d'un style prédéfini afin de permettre les clics sur chacun des boutons de la ligne.
Form {
HStack(spacing: 12) {
Button("Premier choix") {
choix = 1
}
.buttonStyle(.borderless)
.tint(choix == 1 ? .blue : .gray)
Button("Deuxième choix") {
choix = 2
}
.buttonStyle(.borderless)
.tint(choix == 2 ? .blue : .gray)
}
}
« Creating Forms in SwiftUI ». SerialCoder.dev. https://serialcoder.dev/text-tutorials/swiftui/creating-forms-in-swiftui/
▼Publicité
