SwiftUI: Was sind ViewModifiers?

SwiftUI wird schnell zur beliebten Wahl für die Erstellung von iOS-Apps, und eines der häufigsten Dinge, die Sie verwenden, sind ViewModifiers. Wenn Sie vor dem Lesen dieses Artikels mit SwiftUI gearbeitet haben und nicht wissen, was ViewModifiers sind, garantiere ich Ihnen, dass Sie sie schon einmal verwendet haben, ohne es zu merken.

ViewModifiers sind Methoden, die Sie für die Ansichten aufrufen, die Sie in Ihrer App verwenden, um deren Aussehen und Verhalten anzupassen. Sie verwenden sie, um Farben und Größen zu ändern, Gesten hinzuzufügen, Zugriffsoptionen usw. zu Ihren Ansichten hinzuzufügen. Wenn Sie jemals .backgroundoder .foregroundColorin Ihrem Projekt verwendet haben, sind dies Beispiele für ViewModifiers.

Wie verwenden Sie ViewModifiers?

Beginnen wir mit der Erstellung eines Projekts, ich werde Sie nicht mit dem gesamten Prozess langweilen, also stellen Sie einfach sicher, dass Sie SwiftUI anstelle von Storyboard auswählen, wenn Sie Ihr Projekt erstellen.

Die für Sie erstellte Standardansicht verwendet bereits einige Modifikatoren, also werfen wir einen Blick darauf

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: Hier können Sie die Polsterung für Ihre Ansicht angeben. Beachten Sie, dass, da wir keine Werte angeben, die standardmäßige Systempolsterung für alle Seiten angewendet wird. Sie können die Kanten und Werte so .padding(.top, 12)oder .padding(.horizontal, 12)zum Beispiel angeben
• .foregroundColor: Legt die Vordergrundfarbe für die Ansicht fest und wirkt sich auf Textfarben, Farbtöne usw. aus

• .frame: Wird verwendet, um die Größe einer Ansicht zu ändern
• .font: Wird verwendet, um die Schriftfamilie, Größe usw. für a zu ändernText

Bevor wir beginnen, sehen wir uns die Einschränkungen an, die wir für die Schaltfläche verwenden möchten – Polsterung, Eckenradius, Hintergrundfarbe.

Beginnen wir mit dem Hinzufügen einer einfachen Schaltfläche mit etwas Text:

Button(action: {
    // On click
}) {
    Text("Label")
}

Nach dem Hinzufügen unserer Modifikatoren:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

Das obige Beispiel ist sehr einfach, aber wenn Ihr Projekt viele Ansichten mit ähnlichen Stilen hatte (gemeinsame Füllwerte, themenbezogene Hintergrundfarben usw.), kann es sehr schnell sehr ärgerlich werden, dieselben Modifikatoren wiederholen zu müssen. Glücklicherweise können Sie mit SwiftUI Ihre eigenen benutzerdefinierten Modifikatoren erstellen.

Betrachten wir das obige Beispiel, wenn Sie bemerken, dass der Schaltflächentext nicht genau mit dem übereinstimmt, was wir zu erstellen versuchten. Lassen Sie uns einen benutzerdefinierten Modifikator für den Schaltflächentext erstellen:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()