[Sweet SwiftUI] Text와 수식어

본 내용은 스윗한 SwiftUI 책에 있는 예제를 공부한 내용입니다.
해당 예제들에 대한 저작권은 BJpublic 에 있습니다.

전체적으로 훑어보기

VStack(spacing: 30) {  // 세로 방향으로 뷰를 배열하는 컨테이너 뷰
            Text("폰트와 굵기 설정")
                .font(.title) // 폰트 설정
                .fontWeight(.black) // 폰트 굵기
            
            Text("글자색은 foreground, 배경은 background")
                .foregroundColor(.white)
                .padding()      // 텍스트 주변 여백 설정
                .background(Color.blue)
            
            Text("커스텀 폰트, 볼드체, 이탤릭체, 밑줄, 취소선")
                .font(.custom("Menlo", size: 16))
                .bold()
                .italic()
                .underline()
                .strikethrough()
            
            Text("라인 수 제한과 \\n 텍스트 정렬 기능입니다. \\n 이건 안 보입니다.")
                .lineLimit(2)
                .multilineTextAlignment(.trailing) // 다중행 문자열의 정렬 방식 지정
                .fixedSize() // 주어진 공간의 크기가 작아도 텍스트를 새략하지 않고 표현하도록 설정
            
            // 2개 이상의 텍스트를 하나로 묶어서 동시에 적용
            (Text("자간과 기준선").kerning(8) //자간
             + Text(" 조정도 쉽게 가능합니다.").baselineOffset(8)) // 기준선
            .font(.system(size: 16))

 

Text 수식어 적용의 순서의 중요성

• Text 와 View 의 font, foregroundColor 의 정의

extention Text {
	// Text와 View 모두 있는 수식어
	public func font(_ font: Font?) -> Text
	public func foregroundColor(_ color: Color?) -> Text
	
	// Text에만 있는 수식어
	public func bold() -> Text
	public func italic() -> Text
}

extention View {
	// Text와 View 모두 있는 수식어
	public func font(_ font: Font?) -> some View
	public func foregroundColor(_ color: Color?) -> some View

	// View 에만 있는 수식어
	public func padding(
		_ edges: Edge.Set = .all,
		_ length: CGFloat? = nil
	) -> some View
}

• Text에도, View에도 font 와 foregrountColor 가 정의되어 있다
• 단, 반환 타입이 다름을 주시하자
• View 에만 있거나, Text에만 있는 경우 순서가 중요하다

잘못된 순서로인한 변화 예제

Text("SwiftUi")
	.font(.title) // Text - 호출자의 타입이 Text
	.bold()       // Text
	.padding()    // View - padding 수식어 호출 이후로는 Text가 아닌 View 반환

Text("SwiftUi")
	.bold()       // Text
	.padding()    // View
	.font(.title) // View - 동일한 font 수식어를 호출해도 호출자에 따라 반환타입 다름

Text("SwiftUi")
	.padding()    // View
	.bold()       // 컴파일 오류 - View에는 bold 가 정의되어 있지 않기 때문
	.font(.title) 

Text("SwiftUi")
	.font(.title) // View
	.padding()    // View
	.bold()       // 컴파일 오류 - View에는 bold 가 정의되어 있지 않기 때문

잘못된 순서로 인한 변화 예제2

// 1번
Text("🐶🐱🐭🐹🐼").font(.largeTitle)
	.background(Color.yellow) // 배경 색상지정이 Text 크기에 따라 우선 적용
	.padding()                // 배경 색상이 적용된 Text에 padding 적용

// 2번
Text("🐶🐱🐭🐹🐼").font(.largeTitle)
	.padding()                // Text에 Padding 을 우선 적용!
	.background(Color.yellow) // padding 이 적용된 부분에 배경색상 지정

• 1번

• 2번

• 보이는 것과 같이 순서에 따라 View 자체가 어떻게 그려질지 보여준다
• 이처럼, SwiftUI에서는 수식어의 순서에 따라 오류가 날수도, 보여지는 뷰가 다를수도 있음을 유의하자