How to create custom modifiers

About 2 min

How to create custom modifiers 관련

SwiftUI by Example

Back to Home

How to create custom modifiers | SwiftUI by Example

How to create custom modifiers

Updated for Xcode 15

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())
    }
}