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.

Read My Stories

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps