SwiftUI Custom ViewModifier — einmal definieren, überall verwenden

Ursprünglich erschienen auf Medium im Juli 2024.

Fünf Buttons, fünf Mal dieselbe Modifier-Kette. Das ist Copy-Paste-Entwicklung, und es geht besser.

SwiftUI macht es erschreckend einfach, schöne Views zu bauen — und genau so einfach, sich dabei zu wiederholen. Ein Button mit .font(.headline), .foregroundStyle(.white), .background(.pink), .cornerRadius(16) sieht gut aus. Beim dritten Mal tippen wird es langweilig, und beim fünften ist es ein Wartungsproblem, weil jede Designänderung an fünf Stellen gleichzeitig passieren muss.

Die Lösung ist simpel: Eine Extension auf View, die alle Modifier bündelt.

Die Extension

extension View {
    public func myAmazingModifier(bgColor: Color = .pink) -> some View {
        self
            .font(.headline)
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity)
            .frame(height: 50)
            .background(bgColor)
            .cornerRadius(16)
    }
}

Ein Default-Parameter für die Hintergrundfarbe, alles andere ist fix. Änderungen an Font, Höhe oder CornerRadius wirken sofort überall.

Vorher vs. Nachher

Vorher — jede View trägt die komplette Modifier-Kette:

Text("First Button")
    .font(.headline)
    .foregroundStyle(.white)
    .frame(maxWidth: .infinity)
    .frame(height: 50)
    .background(.pink)
    .cornerRadius(16)

Nachher — ein Einzeiler pro Button:

Text("First Button")
    .myAmazingModifier()

Text("Second Button")
    .myAmazingModifier(bgColor: .yellow)

Text("Third Button")
    .myAmazingModifier(bgColor: .blue)

Fünf Buttons, eine Definition. Die Farbe wird pro Aufruf überschrieben, der Rest bleibt konsistent.

Extension vs. ViewModifier-Protokoll

SwiftUI bietet auch das ViewModifier-Protokoll mit func body(content: Content) -> some View. Wann sich welches lohnt, hängt davon ab, ob der Modifier eigenen State braucht.

Für den Alltag reicht die Extension. Das Protokoll empfiehlt sich erst, wenn der Modifier selbst denken muss — etwa ein Shake-Animation-Modifier mit eigenem Animation-State.

Wenn drei Zeilen reichen, braucht es kein Protokoll.