[SwiftUI] Custom Modifier 만들기

[ 목표 ]

이런 식으로 나만의 Modifier를 만들기! 

  Text("안녕하세요")
      .customStyle()

 

[1] Custom ViewModifier 만들기

ViewModifier 프로토콜을 채택하는 CustomViewModifer를 만들어줍니다. 

content는 스타일을 적용시킬 대상을 말합니다. 

 

 

ViewModifier를 만들면

이런 식으로 modifier 를 이용해서 사용할 수 있습니다. 

 

 

 

[2] extension View

그 후, 아래처럼 View를 extension하면

나만의 Modifier를 만들 수 있습니다. 

 

 

참고로 문서에서는 1번처럼 modifier를 직접 쓸 수도 있지만 

2번처럼 extension 해주는게 더 common하다! 라고 말하고 있습니다. 

 

https://developer.apple.com/documentation/swiftui/viewmodifier

 

[ 추가 ] 

이런식으로 color을 받게 하는 지 등등 

해서 더 일반적으로 쓸 수 도 있습니다.

struct CustomViewModifier: ViewModifier {
    var color: Color
    
    func body(content: Content) -> some View {
        content
            .font(.title)
            .padding(10)
            .overlay(
                RoundedRectangle(cornerSize: CGSize(width: 10, height: 10))
                    .stroke(lineWidth: 1)
            )
            .foregroundColor(color)
    }
}

extension View {
    func customStyle(color: Color) -> some View {
        modifier(CustomViewModifier(color: color))
    }
}

struct ContentView: View {
    var body: some View {
        HStack {
            Text("안녕하세요")
                .customStyle(color: .blue)
            
            Text("반갑습니다")
                .customStyle(color: .green)
        }
    }
}