Die Möglichkeit, benutzerdefinierte Ansichtsmodifikatoren zu erstellen, ist eine leistungsstarke Funktion in SwiftUI. In diesem Artikel werden wir Beispiele dafür behandeln, wie diese Funktion verwendet werden kann, um die Erstellung der Benutzeroberfläche erheblich zu vereinfachen. Wenn Sie mit ViewModifiers in   und der Erstellung benutzerdefinierter ViewModifiers nicht vertraut sind, können Sie hier mehr darüber lesen SwiftUI  Ziel dieses Artikels ist es, einige der verschiedenen Möglichkeiten zum Erstellen benutzerdefinierter Modifikatoren und Stile in SwiftUI zu behandeln und zu erläutern, wie sie verwendet werden können, um die Benutzeroberfläche deklarativer zu gestalten und gleichzeitig eine saubere und konsistente Endausgabe zu erzielen.  Die endgültige Benutzeroberfläche, die wir erstellen möchten, ist diese:    Betrachten wir alle einzelnen Komponenten auf dem Bildschirm:  Bild: Eine Standardbildkomponente mit einem gewissen Eckenradius  Texte: Wir haben einen Titel und einen Fließtext  Schaltfläche: Eine Schaltfläche in voller Breite  Einfacher SwiftUI-Code  Wenn Sie diesen Bildschirm ohne Modifikatoren erstellen, würde der Code etwa so aussehen:   struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity) .frame(height: 220) .cornerRadius(12) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) Spacer() Button(action: { }) { Text("Label") .font(.system(size: 14, weight: .medium)) } .frame(minWidth: 0, maxWidth: .infinity) .padding(.horizontal, 10) .padding(.vertical, 12) .background(Color.blue) .foregroundColor(Color.white) .cornerRadius(12) } .padding(.all, 16) } }  Bei diesem Ansatz gibt es einige Probleme:  Der Stil einiger Elemente (z. B. Titel- und Detailtexte) müsste dupliziert werden  Änderungen an einigen allgemeinen Stilen (Elementauffüllung, Eckenradius usw.) müssten an mehreren Stellen vorgenommen werden  Jetzt könnten Sie dieses Problem auf UIKit-Art lösen, indem Sie benutzerdefinierte Ansichten erstellen. Ich bin jedoch kein Fan dieses Ansatzes, da er die Abkehr von den integrierten Ansichten erfordert und das Onboarding neuer Teammitglieder reibungsloser macht. Eine einfachere Möglichkeit wäre, einige universelle Ansichtsmodifikatoren zu definieren, die anstelle der Stile selbst angewendet werden können.   Lassen Sie uns das allgemeine Styling, das wir benötigen, aufschlüsseln:  Bildschirmcontainer: Der Bildschirm selbst verfügt über eine universelle Polsterung. Dies ist optional, aber ich bevorzuge es, wenn alle Bildschirme einen universellen Stil haben  Eckenradius  Titel- und Fließtexte  Volle Breite: Elemente müssen die Breite ihres übergeordneten Elements ausfüllen können (die Schaltfläche und das Bild im obigen Beispiel).  Knopf-Styling  Bildskalierung  Benutzerdefinierte Ansichtsmodifikatoren  Beginnen wir mit dem Eckenradius:   struct CommonCornerRadius: ViewModifier { func body(content: Content) -> some View { content .cornerRadius(12) } }  Dies ist ziemlich einfach, es ermöglicht uns, einen universellen Eckenradius für Elemente anzuwenden. Dadurch ist es einfacher, App-Stile global zu ändern, ohne benutzerdefinierte Ansichten erstellen oder mehrere Änderungen in der gesamten Codebasis vornehmen zu müssen.   struct FullWidthModifier: ViewModifier { func body(content: Content) -> some View { content .frame(minWidth: 0, maxWidth: .infinity) } }  Dadurch ist die Implementierung von Ansichten in voller Breite einfacher, da kein   mehr manuell hinzugefügt werden muss! .frame   struct TitleTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) } } struct BodyTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) } }  Dies ermöglicht eine allgemeine Textgestaltung. Normalerweise würden Sie entweder benutzerdefinierte Textkomponenten oder Dienstprogrammfunktionen erstellen und UI-Komponenten über Code hinzufügen.   extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }  Okay, Sie haben mich verstanden ... das ist kein benutzerdefinierter Ansichtsmodifikator, sondern eine einfache Erweiterung. Dies liegt daran, dass ViewModifiers den generischen Ansichten ähneln und einige Funktionen wie   nur für Bilder gelten. Die Verwendung einer Kombination aus Erweiterungen und benutzerdefinierten Modifikatoren hilft, dies zu umgehen. resizable   struct FullWidthButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .fullWidth() .foregroundColor(Color.white) .font(.system(size: 14, weight: .medium)) .padding(.horizontal, 10) .padding(.vertical, 12) .background(configuration.isPressed ? Color.blue.opacity(0.2) : Color.blue) } } struct FullWidthButton: ViewModifier { func body(content: Content) -> some View { content .buttonStyle(FullWidthButtonStyle()) } }  Dies gilt schließlich für die Schaltfläche. Beachten Sie, dass wir zwar einfach einen ViewModifier hätten erstellen können, um den gleichen Effekt zu erzielen, das Erscheinungsbild der Schaltfläche sich jedoch beim Antippen nicht geändert hätte. Dies liegt daran, dass das Festlegen von   für eine Schaltfläche dazu führt, dass dieser Hintergrund sowohl im angetippten als auch im ungetippten Zustand verwendet wird.   können wir die Deckkraft der Schaltfläche ändern, je nachdem, ob sie gedrückt wird oder nicht. .background ButtonStyle  Der Einfachheit halber erstelle ich gerne Erweiterungen, die diese Modifikatoren verwenden:   extension View { func commonCornerRadius() -> some View { modifier(CommonCornerRadius()) } func fullWidth() -> some View { modifier(FullWidthModifier()) } func title() -> some View { modifier(TitleTextModifier()) } func body() -> some View { modifier(BodyTextModifier()) } func fullWidthButton() -> some View { modifier(FullWidthButton()) } } extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }  Jetzt konvertieren wir den Code, um diese zu verwenden, anstatt sie direkt zu formatieren:   struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .aspectFill() .fullWidth() .frame(height: 220) .commonCornerRadius() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .title() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .body() Spacer() Button(action: { }) { Text("Awesome") } .fullWidthButton() .commonCornerRadius() } .padding(.all, 16) } }  Viel sauberer! Auf den ersten Blick scheint dies mehr Code und Aufwand zu sein, als nur die Stile manuell festzulegen, aber auf lange Sicht wird dies eine Menge Aufwand sparen. Persönlich trägt dieser Ansatz auch dazu bei, dass der Stil Ihrer App konsistenter wird, indem mehr auf allgemeine Modifikatoren als auf eine Ansicht-für-Ansicht-basierte Gestaltung zurückgegriffen wird.  Und das war’s auch schon! Hoffentlich hilft Ihnen dies dabei, Ihre Apps schneller und einfacher zu erstellen. Ein weiterer Vorteil besteht darin, dass diese Modifikatoren in jede Ihrer Apps eingefügt und an deren Stilrichtlinien angepasst werden können. Ich habe auch an einer Bibliothek gearbeitet, um dies noch weiter voranzutreiben. Sie können sie sich   ansehen (PS: Zum Zeitpunkt des Verfassens dieses Artikels befindet sich die Bibliothek in einem sehr frühen Stadium, das Repo ist leer :p, aber bleiben Sie dran) hier

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!

Zu lang; Lesen

Make resilience your competitive advantage

Ein wesentlicher Leitfaden für SwiftUI: Wiederverwendbare Benutzeroberfläche mit benutzerdefinierten Modifikatoren

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps