[SwiftUI] カスタムModifierの作成

カスタムModifierの作成方法について解説します。
カスタムModifierを作成するためには、ViewModifierプロトコルに準拠する必要があります。
今回は、テキストの背景色を青に変更するBlueLabelというカスタムモディファイアを作成します。

ViewModifierに準拠したカスタムモディファイアを作成

struct BlueLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.blue)
            .foregroundStyle(.white)
            .font(.largeTitle)
    }
}

ViewModifierプロトコルの中を見てみるとbody(content:)が必須になっており、このメソッドを適用することにより、モディファイアを作成できます。

public protocol ViewModifier {
    @ViewBuilder @MainActor func body(content: Self.Content) -> Self.Body
}

カスタムモディファイアを使用する

カスタムモディファイアを使用するには、.modifier(_:)メソッドを使います。

struct ContentView: View {
    var body: some View {        
        Text("Hello, world!")
            .modifier(BlueLabel())
    }
}

ビルド結果