[SwiftUI] ViewModifier

Apple Developer Documentation

 

SwiftUI에서는 주로 Modifier로 View의 속성을 설정한다.

Text("ViewModifier")
    .foregroundColor(.blue)          // 파란색 적용
    .bold()                          // 굵게
    .frame(width: 30, height: 150)   // 너비 30, 높이 150
    .padding()                       // padding 주기

 

우리가 같은 로직을 수행하는 코드를 함수로 만드는 것처럼 매번 사용되는 Modifier도 따로 만들어 놓을 수가 있다.

ex) 목표하고자 하는 코드
Text("Custom ViewModifier")
	.customModifier(isBold: false)

 

ViewModifier 정의

struct CustomViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.blue)
            .frame(width: 150, height: 30)
            .padding()
    }
}

먼저 Custom ViewModifier를 만들어준다.

여기서 bold는 빠져있는데, bold Modifier는 모든 View에서 사용한 Modifier가 아니라서 따로 붙여줘야한다.

 

Extension

먼저 View에 대한 extension을 만들어준다.

extension View {
    public func customModifier() -> some View {
        modifier(CustomViewModifier())
    }
}

 

bold를 위한 Text extension도 만들어준다.

extension Text {
    public func isBold(_ value: Bool) -> Text {
        return value ? self.bold() : self
    }
}

 

그리고 Text에서도  customModifier를 사용할 수 있도록 해준다.

// in Text Extension
public func customModifier(isBold: Bool) -> some View {
    return self.isBold(isBold).customModifier()
}

 

Use

Text("Custom ViewModifier")
    .customModifier(isBold: false)

왼쪽은 false, 오른쪽은 true

 

확실히 자주 쓰는 Modifier가 있을 때 쓰면 좋을듯하다.

 

Complete Code

import SwiftUI

struct ViewModifierExample: View {
    var body: some View {
        Text("ViewModifier")
            .customModifier(isBold: true)
    }
}

extension Text {
    public func isBold(_ value: Bool) -> Text {
        return value ? self.bold() : self
    }
    
    public func customModifier(isBold: Bool) -> some View {
        return self.isBold(isBold).customModifier()
    }
}


extension View {
    public func customModifier() -> some View {
        modifier(CustomViewModifier())
    }
}

struct CustomViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(.blue)
            .frame(width: 150, height: 30)
            .padding()
    }
}