SwiftUI - Text 관련 옵션을 달아보자

1. 기본 텍스트 달기

Text("Hello World")

 

2. 사이즈 조절 및 속성 달기

Text("Hello World")
    .font(.system(size: 30)) //사이즈조절
    .underline() // 밑줄 달기
    .strikethrough() // 취소선 달기
    .fontWeight(.bold) // 글꼴 굵기 조절 (.bold, .medium, .regular) 등등
    .frame(width: 100, height: 200) // 텍스트뷰 자체 크기 조절
    .multilineTextAlignment(.leading) // 정렬 (.leading, .center, .trailing)

3. 패딩 속성 달기

Text("Hello World"
    .padding(10) // 전체 
    .padding(.all, 10) // 전체
    .padding(.top, 10) // top
    .padding(.bottom, 10) // bottom
    .padding(.leading, 10) // left
    .padding(.trailing, 10) // right
    .padding([.top, .bottom, .trailing], 10) // top, bottom, right

4. 색상 속성 달기

Text("Hello World")
	.background(Color.red) // 배경색 
    .foregroundColor(Color.yellow) // 글자색

 

5. 줄의 개수 제한 속성 달기

Text("Hello \n World")
	.lineLimit(2) // 2줄까지 제한
    .lineLimit(nil) // 제한없음
	.lineSpacing(10) // 줄 사이 간격

6. 기타 속성

Text("Hello World")
    .border(Color.black) // 뷰 보더처리
	.cornerRadius(12) // 뷰 라운드 처리
	.shadow(color: Color.black, radius: 12, x: 0, y: 0) // 뷰 그림자 처리

7. 클릭 이벤트

Button(action: {
	print("클릭 이벤트") // Event Code
	}) {
    Text("Hello World")
}

8. 기타 (프레임 관련)

// 텍스트뷰 border를 먼저 만들고 크기를 키운다
Text("Hello World")
	.border(Color.blue)
    .frame(width: 100, height: 200)
    
    
// 크기를 키우고 커져있는 뷰에 보더를 그린다
Text("Hello World")
    .frame(width: 100, height: 200)
    .border(Color.blue)

 

해당 속성들은 텍스트 뷰가 아니더라도 다른 속성에서도 동일한 내용으로 사용 할수 있다.