Salut! Je voudrais vous parler de un framework pour créer des interfaces utilisateur sur iOS et macOS. Il est très pratique à utiliser car il utilise une approche déclarative de la programmation. Avec SwiftUI, vous pouvez décrire ce que votre interface doit faire et ressembler, et le framework s'occupera du reste. SwiftUI, L'un des éléments clés de SwiftUI est l'utilisation de wrappers de propriété. Ce sont des éléments fonctionnels qui vous permettent de fournir une logique supplémentaire pour les propriétés. SwiftUI a cinq principaux wrappers de propriétés : @État @Obligatoire @ObjetObservé @StateObject @EnvironmentObject Ils deviendront vos meilleurs amis dans le développement. @État vous permet de créer des propriétés qui peuvent être modifiées et, si nécessaire, de mettre à jour l'interface en fonction de ces modifications. Par exemple, si vous souhaitez créer un bouton qui change de couleur lorsqu'il est pressé, vous pouvez créer une variable @State pour stocker la couleur et l'ajouter au bouton : @State struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } } @Obligatoire vous permet d'utiliser une valeur Il est généralement utilisé dans SwiftUI pour transmettre une valeur d'une vue à une autre, leur permettant d'interagir les unes avec les autres. Par exemple, imaginons que nous ayons deux vues - l'une avec un champ de texte et l'autre avec un bouton. Nous voulons que le champ de texte soit mis à jour lorsque l'utilisateur appuie sur le bouton. Pour ce faire, nous pouvons utiliser @Binding : @Binding stockée dans une partie du code dans une autre partie du code. struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } } Dans cet exemple, est utilisé pour passer la valeur de (qui est dans ) à (qui est dans ), ainsi lorsque l'utilisateur appuie sur le bouton, le champ de texte sera mis à jour et affichera le nouveau texte. @Binding $text ContentView text SecondView @ObjetObservé est utilisé pour marquer les propriétés qui sont Ce wrapper de propriété s'abonne aux modifications de l'objet qui se conforme au et met automatiquement à jour les parties pertinentes de l'interface si les données ont changé. Voici un bref exemple d'utilisation : @ObservedObject observées et peuvent changer en fonction des changements de données externes. protocole ObservableObject de @ObservedObject class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } } Dans cet exemple, nous créons une classe appelée UserData, qui contient un nom @Published. Dans la structure ContentView, nous créons une propriété appelée userData avec le type UserData, Nous affichons la valeur de userData.name dans un champ de texte et l'affichons à l'écran. en utilisant @ObservedObject. Lorsque l'utilisateur modifie la valeur dans le SwiftUI met automatiquement à jour la partie correspondante de l'interface, car la propriété est publiée et observée à l'aide Cela signifie que nous n'avons pas besoin de notre propre code pour mettre à jour l'interface, et nous permettons à SwiftUI de le faire pour nous. champ de texte, name de @Published. Si vous ne le savez pas, @Published est un wrapper de propriété du framework Combine qui peut être ajouté à une propriété de classe ou de structure, qui envoie automatiquement des notifications de toute modification de la valeur de cette propriété à toute personne qui s'y est abonnée . En d'autres termes, il s'agit d'un attribut d'assistance pour les propriétés qui peuvent être suivies pour les modifications. Remarque : @StateObject est un wrapper de propriété utilisé Cela signifie que l'objet est stocké tant que la vue existe et qu'il est détruit avec elle. En règle générale, l'utilisation est plus pratique pour les objets de classe qui sont nécessaires pour vues, pas Par exemple: @StateObject pour initialiser un objet de classe et le stocker dans l'état d'affichage de SwiftUI. de @StateObject plusieurs une seule. class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } } Dans cet exemple, est un objet d'une classe qui contient plusieurs propriétés pouvant être utilisées dans plusieurs vues. La classe est marquée comme afin qu'elle puisse être utilisée avec et . UserData ObservableObject @StateObject @ObservedObject Dans nous créons un nouvel objet en utilisant pour enregistrer l'état entre les transitions entre différentes vues. Dans ce cas, affiche les données utilisateur, les visualise et contient un lien vers une autre vue qui peut être utilisée pour modifier les données utilisateur. ContentView, UserData @StateObject ContentView (ProfileView) Dans , nous avons accès au même objet en utilisant pour modifier les données utilisateur. Lorsque l'utilisateur modifie des données, elles sont automatiquement mises à jour dans car le même objet est utilisé. ProfileView UserData @ObservedObject ContentView UserData utilisez @ObservedObject si vous avez besoin d'observer les modifications d'un objet de classe à partir d'une vue et @StateObject si vous devez enregistrer l'état d'un objet de classe qui affecte l'affichage de plusieurs vues. Remarque : Si vous utilisez @ObservedObject au lieu de @StateObject pour un objet nécessaire dans plusieurs vues, chaque vue aura sa propre instance de l'objet, ce qui peut entraîner des problèmes de synchronisation des données entre les vues. Par conséquent, dans ce cas, il est préférable d'utiliser @StateObject. @EnvironmentObject est un wrapper de propriété pour Il permet d'accéder à l'objet de données à partir de n'importe quelle vue de la hiérarchie SwiftUI qui appartient au conteneur d'environnement (par exemple, scène, vue, application, etc.). Par exemple, imaginons que nous ayons une application de gestion de liste de tâches. Nous pouvons avoir un racine qui contient une liste de tâches et la possibilité de créer de nouvelles tâches. Pour cela, nous créons une vue séparée qui affiche la liste des tâches et un bouton pour ajouter de nouvelles tâches. Après avoir ajouté une nouvelle tâche, l'utilisateur doit être redirigé vers l'écran d'ajout de tâche, nous créons donc une vue distincte. @EnvironmentObject transmettre des objets de données via la hiérarchie de vue SwiftUI. ContentView TaskListView AddTaskView Pour transmettre l'objet aux trois vues, nous pouvons créer son instance dans , puis la transmettre en tant que paramètre à et . Cependant, cela peut devenir un problème si nous décidons d'ajouter encore plus de vues imbriquées, car nous devrons faire passer par de nombreuses vues intermédiaires. UserManager ContentView TaskListView AddTaskView UserManager Au lieu de cela, nous pouvons utiliser pour transmettre à travers la hiérarchie des vues. De cette façon, toutes les vues qui ont besoin d'accéder à peuvent simplement le déclarer en tant que et l'utiliser au besoin. @EnvironmentObject UserManager UserManager @EnvironmentObject struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } } Ainsi, l'objet sera désormais automatiquement transmis à et via . Notez que nous pouvons modifier l'état de dans une vue et que les modifications seront automatiquement répercutées dans l'autre vue. UserManager TaskListView AddTaskView @EnvironmentObject UserManager L'article couvrait les wrappers de base de la propriété SwiftUI : @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject. Ces wrappers de propriétés constituent la base de l'utilisation de l'état de l'application dans SwiftUI. Utilisez cet article comme aide-mémoire pour avoir à portée de main les wrappers de propriétés de base, nécessaires au développement d'applications avec SwiftUI. En appliquant ces connaissances, vous pourrez créer des interfaces utilisateur plus complexes avec des états changeant dynamiquement et intégrer les données de vos modèles dans SwiftUI.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Les 5 principaux wrappers de propriété de SwiftUI et comment les utiliser efficacement

Trop long; Pour lire

Mykhailo Tseitlin

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Les 5 principaux wrappers de propriété de SwiftUI et comment les utiliser efficacement

Trop long; Pour lire

Mykhailo Tseitlin

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES