How to create custom modifiers
Updated for Xcode 16.4
If you find yourself constantly attaching the same set of modifiers to a view – e.g., giving it a background color, some padding, a specific font, and so on – then you can avoid duplication by creating a custom view modifier that encapsulates all those changes. So, rather than say “make it red, make it use a large font” and so on, you can just say “make it look like a warning,” and apply a pre-made set of modifiers.
If you want to make your own, define a struct that conforms to the ViewModifier protocol. This protocol requires that you accept a body(content:) method that transforms some sort of content however you want, returning the result.
For example, this creates a new PrimaryLabel modifier that adds padding, a red background, white text, and a large font, then uses it in a view:
struct PrimaryLabel: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(.red)
.foregroundStyle(.white)
.font(.largeTitle)
}
}
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI")
.modifier(PrimaryLabel())
}
}
Download this as an Xcode project
SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further for less! Get my all-new book Everything but the Code to make more money with apps, get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn Swift Testing, design patterns, and more.
Similar solutions…
- How to create modifiers for a UIViewRepresentable struct
- How to stack modifiers to create more advanced effects
- How to make SwiftUI modifiers safer to use with @warn_unqualified_access
- How to create and compose custom views
- How to create a custom transition
