Hallo! Ich möchte Ihnen etwas über   ein Framework zum Erstellen von Benutzeroberflächen auf iOS und macOS. Es ist sehr benutzerfreundlich, da es einen deklarativen Programmieransatz verwendet. Mit SwiftUI können Sie beschreiben, wie Ihre Benutzeroberfläche funktionieren und aussehen soll, und das Framework kümmert sich um den Rest. SwiftUI erzählen,  Eines der Schlüsselelemente von SwiftUI ist die Verwendung von Eigenschaften-Wrappern. Hierbei handelt es sich um Funktionselemente, mit denen Sie zusätzliche Logik für Eigenschaften bereitstellen können.  SwiftUI verfügt über  fünf Haupteigenschaften-Wrapper:   @Zustand   @Bindung   @ObservedObject   @StateObject   @EnvironmentObject  Sie werden Ihre besten Freunde in der Entwicklung sein.   @Zustand    können Sie Eigenschaften erstellen, die geändert werden können, und bei Bedarf die Schnittstelle basierend auf diesen Änderungen aktualisieren. Wenn Sie beispielsweise eine Schaltfläche erstellen möchten, die beim Drücken ihre Farbe ändert, können Sie eine @State-Variable erstellen, um die Farbe zu speichern und sie der Schaltfläche hinzuzufügen: Mit @State   struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }  @Bindung    können Sie einen Wert, der   In SwiftUI wird es normalerweise verwendet, um einen Wert von einer Ansicht an eine andere zu übergeben, sodass diese miteinander interagieren können. Stellen Sie sich zum Beispiel vor, wir hätten zwei Ansichten – eine mit einem Textfeld und die andere mit einer Schaltfläche. Wir möchten, dass das Textfeld aktualisiert wird, wenn der Benutzer die Schaltfläche drückt. Dazu können wir @Binding verwenden: Mit @Binding in einem Teil des Codes gespeichert ist, in einem anderen Teil des Codes verwenden.   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) } }  In diesem Beispiel wird   verwendet, um den Wert von   (in   ) an   (in   ) zu übergeben. Wenn der Benutzer also die Schaltfläche drückt, wird das Textfeld aktualisiert und der neue Text angezeigt. @Binding $text ContentView text SecondView   @ObservedObject    wird verwendet, um Eigenschaften zu markieren, die     Dieser Eigenschaften-Wrapper abonniert Änderungen im Objekt, das dem   entspricht, und aktualisiert automatisch die relevanten Teile der Schnittstelle, wenn sich die Daten geändert haben. Hier ist ein kurzes Beispiel für die Verwendung von   : @ObservedObject beobachtet werden und sich abhängig von externen Datenänderungen ändern können. ObservableObject-Protokoll @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) } } }  In diesem Beispiel erstellen wir eine Klasse namens UserData, die einen @Published-Namen enthält. In der ContentView-Struktur erstellen wir   Wir zeigen den Wert von userData.name in einem Textfeld an und geben ihn auf dem Bildschirm aus. mithilfe von @ObservedObject eine Eigenschaft namens userData mit dem Typ UserData.  Wenn der Benutzer den Wert im   aktualisiert SwiftUI automatisch den entsprechenden Teil der Schnittstelle, da die   mit   Das bedeutet, dass wir zum Aktualisieren der Schnittstelle keinen eigenen Code benötigen und SwiftUI dies für uns erledigen lassen. Textfeld ändert, Namenseigenschaft @Published veröffentlicht und beobachtet wird.    Falls Sie es nicht wissen: @Published ist ein Eigenschaften-Wrapper aus dem Combine-Framework, der einer Klassen- oder Struktureigenschaft hinzugefügt werden kann und automatisch Benachrichtigungen über alle Änderungen am Wert dieser Eigenschaft an jeden sendet, der sie abonniert hat . Mit anderen Worten handelt es sich um ein Hilfsattribut für Eigenschaften, dessen Änderungen nachverfolgt werden können. Hinweis:   @StateObject    ist ein Eigenschaften-Wrapper, der   Dies bedeutet, dass das Objekt so lange gespeichert wird, wie die Ansicht existiert, und zusammen mit dieser zerstört wird. Normalerweise ist die Verwendung   praktischer für Klassenobjekte, die für   Ansichten und nicht nur für   Zum Beispiel: @StateObject zum Initialisieren eines Klassenobjekts und zum Speichern im Ansichtszustand in SwiftUI verwendet wird. von @StateObject mehrere eine benötigt werden.   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") } }  In diesem Beispiel ist   ein Objekt einer Klasse, die mehrere Eigenschaften enthält, die in mehreren Ansichten verwendet werden können. Die Klasse ist als   markiert, sodass sie mit   und   verwendet werden kann. UserData ObservableObject @StateObject @ObservedObject  In   erstellen wir mithilfe von   ein neues   Objekt, um den Status zwischen Übergängen zwischen verschiedenen Ansichten zu speichern. In diesem Fall zeigt   Benutzerdaten an, visualisiert sie und enthält einen Link zu einer anderen Ansicht   , mit der die Benutzerdaten bearbeitet werden können. ContentView @StateObject UserData- ContentView (ProfileView)  In   erhalten wir mithilfe von   Zugriff auf dasselbe   Objekt, um Benutzerdaten zu ändern. Wenn der Benutzer Daten ändert, werden diese automatisch in   aktualisiert, da dasselbe   Objekt verwendet wird. ProfileView @ObservedObject UserData- ContentView UserData-    Verwenden Sie @ObservedObject, wenn Sie Änderungen in einem Klassenobjekt aus einer Ansicht beobachten müssen, und @StateObject, wenn Sie den Status eines Klassenobjekts speichern müssen, der sich auf die Anzeige mehrerer Ansichten auswirkt. Hinweis:   Wenn Sie @ObservedObject anstelle von @StateObject für ein Objekt verwenden, das in mehreren Ansichten benötigt wird, verfügt jede Ansicht über eine eigene Instanz des Objekts, was zu Problemen bei der Datensynchronisierung zwischen Ansichten führen kann. Daher ist es in diesem Fall besser, @StateObject zu verwenden.   @EnvironmentObject    ist ein Eigenschaften-Wrapper zum   Es ermöglicht den Zugriff auf das Datenobjekt aus jeder Ansicht in der SwiftUI-Hierarchie, die zum Umgebungscontainer gehört (z. B. Szene, Ansicht, App usw.). Stellen Sie sich zum Beispiel vor, wir hätten eine App zur Aufgabenlistenverwaltung. Wir können eine Root-   haben, die eine Liste von Aufgaben und die Möglichkeit enthält, neue Aufgaben zu erstellen. Dazu erstellen wir eine separate   Ansicht, die die Liste der Aufgaben und einen Button zum Hinzufügen neuer Aufgaben anzeigt. Nach dem Hinzufügen einer neuen Aufgabe sollte der Benutzer zum Bildschirm „Aufgabe hinzufügen“ weitergeleitet werden, sodass wir eine separate   Ansicht erstellen. @EnvironmentObject Weiterleiten von Datenobjekten durch die SwiftUI-Ansichtshierarchie. ContentView TaskListView- AddTaskView-  Um das   Objekt an alle drei Ansichten zu übergeben, können wir seine Instanz in   erstellen und es dann als Parameter sowohl an   als auch an   übergeben. Dies kann jedoch zu einem Problem werden, wenn wir uns entscheiden, noch mehr verschachtelte Ansichten hinzuzufügen, da wir   durch viele Zwischenansichten leiten müssen. UserManager- ContentView TaskListView AddTaskView UserManager  Stattdessen können wir   verwenden, um   durch die Ansichtshierarchie nach unten zu leiten. Auf diese Weise können alle Ansichten, die Zugriff auf   benötigen, diesen einfach als   deklarieren und bei Bedarf verwenden. @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 } }  Nun wird das   Objekt automatisch über   an   und   übergeben. Beachten Sie, dass wir den Status von   in einer Ansicht ändern können und die Änderungen automatisch in der anderen Ansicht widergespiegelt werden.  UserManager- @EnvironmentObject TaskListView AddTaskView UserManager  Der Artikel behandelte die grundlegenden SwiftUI-Eigenschafts-Wrapper:  @State, @Binding, @ObservedObject, @StateObject, @EnvironmentObject.  Diese Eigenschaften-Wrapper bilden die Grundlage für die Arbeit mit dem App-Status in SwiftUI. Verwenden Sie diesen Artikel als Spickzettel, um die grundlegenden Eigenschaften-Wrapper zur Hand zu haben, die für die Entwicklung von Apps mit SwiftUI erforderlich sind. Durch die Anwendung dieses Wissens können Sie komplexere Benutzeroberflächen mit sich dynamisch ändernden Zuständen erstellen und Daten aus Ihren Modellen in SwiftUI integrieren.

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

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Die 5 wichtigsten Property Wrapper von SwiftUI und wie man sie effektiv nutzt

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps