[SwiftUI] Custom modifier

오늘 SwiftUI 얘기를 많이하게 되네요.

신기하고 재밌는게 많이 있어서 그런거 같아요.

그런데 아직 실무에서 쓸 수 있을지 가늠이 잘 안가는데

틈틈이 써볼 계획입니다.

 

---

modifier 를 임의로 만들어 쓸 수 있는데

앱 내에서 지정된 스타일이 있다면 매번 중복으로 사용하기 보다 

custom 으로 만들어두고 호출해 쓰면 더 좋아 보이네요.

 

ViewModifier 를 상속받은 TitleLabel 을 만들어 줍니다.

struct TitleLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.red)
            .foregroundColor(Color.white)
            .font(.title)
    }
}

그리고 이걸 이용할 때엔 View.modifier(...) 를 써주면 되요.

쉽네요!

struct ContentView: View {
    var body: some View {
        Text("제목이에요")
            .modifier(TitleLabel())
    }
}

 

그.런.데

 

.fontWeight 를 넣는건 또 안되네요

해당 modifier는 Text view를 기반으로 제공하기에

Content로 넘어온 body는 제공하지 못하나 봅니다.

 

우회해서 사용하는데 Text를 확장해서 사용하거나

아래와 같이 font를 별도로 정의해서 할당하거나 하는데

확장하는 것 보다 아래 방법이 좀 더 맘에들긴 하네요.

struct TitleLabel: ViewModifier {
    let customFont = Font.title.weight(.semibold)
    
    func body(content: Content) -> some View {
        content
            .padding(7)
            .background(Color.red)
            .foregroundColor(Color.white)
            .font(customFont)
    }
}

extension Text {
    func h1() -> Text {
        self
            .padding()
            .background(Color.red)
            .foregroundColor(Color.white)
            .font(.title)
            .fontWeight(.semibold)
    }
}

// 사용 시
// Text("제목").h1()

 

내일 되면 까먹으니 

바로 정리해 둡니다