카테고리 없음

[SwiftUI-기초] Custom modifier

Damagucci-juice 2022. 10. 15. 13:42
  • .font(), .background, 와 같은 modifier 를 커스텀하게 만들어 보고 싶다는 욕구가 있으면 이번 포스팅은 도움이 될 것입니다. 
  • 아주 간단하게 ViewModifier 를 채택하는 Struct를 채택하기만 하면 됩니다. 

방법 1 - 꾸미기 기능만 하는 Modifier

struct Title: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(.blue)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

사용은 이렇게 합니다. 

좀 아쉽죠?

.modifier 를 사용해서 하는게 좀 아쉽죠? 이쁘진 않습니다. 성형시켜 주겠습니다. 

View 타입에 extension 으로 some View 를 반환하는 메서드를 달아주면 됩니다. 

한결 나아졌습니다. 

완성된 모습은 다음과 같습니다.  

방법2 - 꾸며주는 것 보단 추가하기 

배경이 되는 뷰에 워터마크를 달아주는 modifier 를 만들면 어떨까요? 

struct Watermark: ViewModifier {
    var text: String

    func body(content: Content) -> some View {
        ZStack(alignment: .bottomTrailing) {
            content
            Text(text)
                .font(.caption)
                .foregroundColor(.white)
                .padding(5)
                .background(.black)
        }
    }
}

extension View {
    func watermarked(with text: String) -> some View {
        modifier(Watermark(text: text))
    }
}

물론 가능합니다. 

요로코롬 나오네요.

custom Modifier VS. extension 

간단하게, extension 으로 메서드를 추가할 땐 프로퍼티를 가질 수 없지만, Custom modifier 를 선언하면 프로퍼티를 

가질 수 있습니다. 욜레이 ~