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.

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Making security fun one episode at a time

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

Zu lang; Lesen

Nemi Shah

STORY’S CREDIBILITY

Code License

Guide

About Author

Hängeetiketten

Languages

DIESER ARTIKEL WURDE VORGESTELLT IN...

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

Zu lang; Lesen

Nemi Shah

STORY’S CREDIBILITY

Code License

Guide

About Author

Hängeetiketten

Languages

DIESER ARTIKEL WURDE VORGESTELLT IN...

ÄHNLICHE BEITRÄGE