How to wrap a custom UIView for SwiftUI >

How to create custom modifiers

Paul Hudson @twostraws September 18th 2019

Updated for Xcode 12.0

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:

struct PrimaryLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.red)
            .foregroundColor(Color.white)
            .font(.largeTitle)
    }
}

To use that in one of your views add the .modifier(PrimaryLabel()) modifier, like this:

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI")
            .modifier(PrimaryLabel())
    }
}

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to create custom modifiers

Similar solutions…