1. Button
Button(role: .destructive) {
print("Clicked")
} label: {
Text("PADO")
.padding()
.frame(width:150)
.background(.yellow)
.cornerRadius(12)
}
- Button(role: .destructive) : 버튼의 역할이 무엇인지, desturctive이므로 텍스트 컬러가 빨강으로 설정됨
- Button {여기 !!} 에 버튼을 눌렀을 때 어떤액션이 일어나는지 보여줌
- label로 버튼을 꾸며줄 수 있는데 Text("여기!!")에 있는 텍스트를 보여줌
- .padding() : 패딩 주기
- .frame(width:150) : 가로를 150으로
- .backgound(.yellow) : 배경 컬러를 노랑으로
- .cornerRadius(12) : radius를 12로
* 순서대로 적용되므로, 순서를 고려하여 입력
padding - frame - background - cornerRadius
Button("PADO") {
print("Clicked")
}
- Button("텍스트") {
액션
}
2. Text
VStack{
Text("Hello")
.bold()
.italic()
.strikethrough()
Text("Hello")
.font(.system(size: 60))
Text("Hello")
.underline(true, color: .orange)
.foregroundColor(.yellow)
.background(.purple)
Text("Hello")
.foregroundColor(.green)
.bold()
.font(.system (size: 39, weight: .bold, design: .serif))
}
- Text("여기!!")에 있는 텍스트를 보여줌
- .bold() : 볼드체
- .italic() : 이탈릭체
- .strikethrough() : 취소선
- .font(.system(size: 60)) : 폰트 사이즈 60
- .underline(true, color: .orange) : 오렌지색 밑줄
- .foregroundColor(.yellow) : 글자색 노랑
- .background(.purple) : 배경색 보라
- .font(.system (size: 39, weight: .bold, design: .serif)) : 폰트 사이즈 39, 볼드체, 세리프체
3. Image
Image("flower")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 200)
.clipped()
.background(.yellow)
.border(.blue, width: 7)
- Image("여기")에 있는 이미지를 보여줌
- .resizable() : 사이즈를 조절 가능
- .aspectRatio(contentMode: .fill) : 이미지가 꽉차게 , fit은 프레임을 넘어서지 않게
- .frame(width: 200, heigth: 200) : 가로 200, 세로 200
- .clipped() : .fill로 넘어선 영역 자르기
- .backround(.yellow) : 배경색 노랑
- .border(.blue, width: 7) : 두께 7의 파랑색 테두리
- Image(systemName: "heart.fill") : SF폰트에 있는 heart.fill 보여줌
4. Stack
VStack(alignment: .leading){
Text("1")
Text("2")
Text("3")
.background(.blue)
}
- VStack{} : 수직 정렬
- HStack{} : 수평 정렬
- ZStack{} : 레이어처럼 쌓임
- Stack(alignment: .leading) : 왼쪽 정렬
5. ScrollView
ScrollView(.horizontal, showsIndicators: false){
HStack{
Text("1")
.frame(width: 300, height: 500)
.background(.red)
Text("2")
.frame(width: 300, height: 500)
.background(.blue)
Text("3")
.frame(width: 300, height: 500)
.background(.orange)
}
}
.background(.yellow)
- ScrollView{} : 화면보다 더 큰 콘텐츠를 스크롤할 수 있게 해줌
- showsIndicator: : 인디케이터 노출 여부
-
다 쓰고 느낀 점.
한 줄씩 쓸 거면 주석으로 쓸 걸 ...
'iOS' 카테고리의 다른 글
[SwiftUI] DarkMode, Divider, sheet, fullScreenCover, alert, TabView (1) | 2023.04.11 |
---|---|
[SwiftUI] @State, padding, frame (1) | 2023.04.06 |
[SwiftUI] List, Section, Spacer, Color (0) | 2023.04.05 |
[iOS App Dev Tutorials] SwiftUI essentials (0) | 2023.03.23 |