ChatGPT contre SwiftUI. Non pas que je sois inquiet, mais… | de Michael Long | décembre 2022

Non pas que je sois inquiet, mais…

ChatGPT est un projet de démonstration d’OpenAI qui peuvent converser sur un certain nombre de sujets. Y compris la programmation.

Allons-y à l’épreuve, d’accord ?

Tout ce qui suit à partir de ce point est mes invites de saisie, suivies des réponses de ChatCGP, complétées par un exemple de code.

Hey ChatGPT, pouvez-vous créer un formulaire d’inscription SwiftUI avec les champs nom, adresse, ville, état et code postal ?

Bien sûr! Voici un exemple simple de formulaire dans SwiftUI qui contient des champs pour le nom, l’adresse, la ville, l’état et le code postal d’une personne :

import SwiftUI
struct EntryForm: View {
@State private var name: String = ""
@State private var address: String = ""
@State private var city: String = ""
@State private var state: String = ""
@State private var zipCode: String = ""
var body: some View {
Form {
TextField("Name", text: $name)
TextField("Address", text: $address)
TextField("City", text: $city)
TextField("State", text: $state)
TextField("Zip code", text: $zipCode)
}
}
}

Dans cet exemple, le EntryForm la structure est conforme à la View protocole et définit un body propriété qui renvoie un Form voir. La Form la vue contient TextField vues pour chacun des champs de formulaire, et les @State propriété wrapper est utilisé pour gérer l’état de chaque champ.

Pouvez-vous déplacer les champs vers un modèle de vue ?

Oui, vous pouvez déplacer les champs du formulaire vers un modèle de vue distinct afin de mieux gérer l’état et la logique du formulaire. Voici un exemple de ce à quoi cela pourrait ressembler :

import SwiftUI
struct EntryForm: View {
@ObservedObject var viewModel: EntryFormViewModel
var body: some View {
Form {
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)
}
}
}
class EntryFormViewModel: ObservableObject {
@Published var name: String = ""
@Published var address: String = ""
@Published var city: String = ""
@Published var state: String = ""
@Published var zipCode: String = ""
}

Dans cet exemple, le EntryForm structure a une @ObservedObject propriété qui fait référence à une instance de EntryFormViewModel classer. Cela permet au EntryForm view pour lier les propriétés du modèle de vue à l’aide de la $ préfixe, tout comme il l’a fait avec le @State propriétés dans l’exemple précédent.

La EntryFormViewModel la classe définit @Published propriétés pour chacun des champs du formulaire, ce qui permet à la vue d’être avertie lorsque les valeurs de ces propriétés changent. Cela permet à la vue de se mettre à jour automatiquement lorsque l’utilisateur modifie les champs du formulaire.

Cette approche permet de séparer la logique de la vue et la gestion de l’état de la vue elle-même, ce qui facilite la compréhension et la maintenance du code.

Que se passe-t-il si j’ai besoin de valider qu’aucun des champs n’est vide ?

Si vous avez besoin de valider qu’aucun des champs du formulaire n’est vide, vous pouvez ajouter une méthode au EntryFormViewModel classe qui vérifie les valeurs des champs du formulaire et renvoie une Bool indiquant si le formulaire est valide ou non. Voici un exemple de ce à quoi cela pourrait ressembler :

class EntryFormViewModel: ObservableObject {
@Published var name: String = ""
@Published var address: String = ""
@Published var city: String = ""
@Published var state: String = ""
@Published var zipCode: String = ""
var isValid: Bool {
return !name.isEmpty && !address.isEmpty && !city.isEmpty && !state.isEmpty && !zipCode.isEmpty
}
}

Dans cet exemple, le isValid propriété utilise le isEmpty propriété de chacun des champs du formulaire pour déterminer si le formulaire est valide ou non. Si tous les champs ne sont pas vides, le isValid la propriété reviendra truesinon il reviendra false.

Vous pouvez ensuite utiliser cette propriété dans la vue pour activer ou désactiver un bouton d’envoi, par exemple, ou pour afficher un message d’erreur si le formulaire n’est pas valide.

struct EntryForm: View {
@ObservedObject var viewModel: EntryFormViewModel
var body: some View {
Form {
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)
if !viewModel.isValid {
Text("All fields are required")
.foregroundColor(.red)
}
}
}
}

Dans cet exemple, le EntryForm la vue vérifie la valeur de isValid propriété et, si le formulaire n’est pas valide, il affiche un message d’erreur à l’aide d’un Text voir. Cela permet à l’utilisateur de savoir quels champs doivent être remplis pour que le formulaire soit valide.

Pouvons-nous ajouter un bouton Enregistrer à ce formulaire ?

Oui, vous pouvez ajouter un bouton Enregistrer au formulaire en utilisant un Button voir dans le EntryForm structure. Voici un exemple de ce à quoi cela pourrait ressembler :

struct EntryForm: View {
@ObservedObject var viewModel: EntryFormViewModel
var body: some View {
Form {
TextField("Name", text: $viewModel.name)
TextField("Address", text: $viewModel.address)
TextField("City", text: $viewModel.city)
TextField("State", text: $viewModel.state)
TextField("Zip code", text: $viewModel.zipCode)
if !viewModel.isValid {
Text("All fields are required")
.foregroundColor(.red)
}
Button(action: {
// Save the form data here
}) {
Text("Save")
}
.disabled(!viewModel.isValid)
}
}
}

Dans cet exemple, le EntryForm la vue comprend une Button vue avec une fermeture d’action qui est appelée lorsque le bouton est appuyé. Cette fermeture peut être utilisée pour enregistrer les données du formulaire dans une base de données ou un autre emplacement de stockage.

La Button vue a également un disabled modificateur qui désactive le bouton si le isValid propriété de la EntryFormViewModel est false. Cela garantit que le formulaire doit être rempli correctement avant que l’utilisateur puisse enregistrer les données.

Temps total écoulé : 2 minutes.

Il a fallu plus de temps pour formater cet article.

Bloc d’achèvement

Je ne sais pas quoi dire d’autre…