[SwiftUI] Button, Text, Image, Stack, ScrollView

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: : 인디케이터 노출 여부

 

-

 

다 쓰고 느낀 점.

한 줄씩 쓸 거면 주석으로 쓸 걸 ...