SwiftUI 기본 정리

SwiftUI 기본 정리

1. 텍스트 또는 이미지 등 무언가 속성을 쓰고 VStack이나 HStack으로 감싸는 식

 

 

 

1-1. 당연히 VStack 안에 HStack , 또는 HStack 안에 VStack이 들어갈 수 있다.

 

물론 위의 MyVStackView를 별도의 파일로 뺄 수도 있다.

 

 

2. 뷰에다가 클릭 처리를 하고 싶다? -> .onTapGesture { } 사용

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            MyVStackView()
            MyVStackView()
            MyVStackView()
        }
        .padding(10)
        .background(Color.yellow)
        //탭 제스쳐 추가
        .onTapGesture {
            print("HStack 클릭됨")
        }
    }
}

 

3. @State : 값의 변화를 감지 -> 뷰에 적용할 수 있게 해줌

값이 변경되면서 위에서부터 아래로 랜더링 되면서 다시 뷰를 그린다.

import SwiftUI

struct ContentView: View {
    
    //@State: 값의 변화를 감지 -> 뷰에 적용할 수 있게 해줌
    @State private var isActivated: Bool = false
    
    var body: some View {
        HStack {
            MyVStackView()
            MyVStackView()
            MyVStackView()
        }
        .padding(10)
        .background(isActivated ? Color.yellow : Color.green)
        //탭 제스쳐 추가
        .onTapGesture {
            print("HStack 클릭됨")
            //toggle() true 이면 false로, false이면 true
            self.isActivated.toggle()
        }
    }
}

 

4. 애니메이션 효과 추가하고 싶다면? withAnimation { }

import SwiftUI

struct ContentView: View {
    
    //@State: 값의 변화를 감지 -> 뷰에 적용할 수 있게 해줌
    @State private var isActivated: Bool = false
    
    var body: some View {
        HStack {
            MyVStackView()
            MyVStackView()
            MyVStackView()
        }
        .padding(isActivated ? 30 : 10)
        .background(isActivated ? Color.yellow : Color.green)
        //탭 제스쳐 추가
        .onTapGesture {
            print("HStack 클릭됨")
            
            //애니메이션과 함께
            withAnimation {
                //toggle() true 이면 false로, false이면 true
                self.isActivated.toggle()
            }
        }
    }
}

 

font 관련

 .font(.caption) : 글씨 작아짐

.italic() :글씨 기울이기

.underline(): 밑줄

.strikethrough() :취소선

.lineLimit(2): 2줄로 제한(numberofLines)

.kerning(10) : 장평, 자간 조절

 

 

5. Navigation 달고 넘기고 싶다면?

넘기기 전의 뷰 전체를 네비게이션으로 감싼 다음에 -> 넘기면 됨

 

  NavigationLink(destination: Text("호호")) {
       Text("네비게이션")
 }

Text("네비게이션") 누르면 -> destination 으로 넘어감

 

import SwiftUI

struct ContentView: View {
    
    //@State: 값의 변화를 감지 -> 뷰에 적용할 수 있게 해줌
    @State private var isActivated: Bool = false
    
    var body: some View {
        
        NavigationView {
            VStack {
                HStack {
                    MyVStackView()
                    MyVStackView()
                    MyVStackView()
                }
                .padding(isActivated ? 30 : 10)
                .background(isActivated ? Color.yellow : Color.green)
                //탭 제스쳐 추가
                .onTapGesture {
                    print("HStack 클릭됨")
                    
                    //애니메이션과 함께
                    withAnimation {
                        //toggle() true 이면 false로, false이면 true
                        self.isActivated.toggle()
                    }
                }
                
                //네비게이션 버튼(링크)
                NavigationLink(destination: Text("호호")) {
                    Text("네비게이션")
                        .fontWeight(.heavy)
                        .font(.system(size: 40))
                        .padding()
                        .background(Color.orange)
                        .foregroundColor(Color.white)
                        .cornerRadius(30)
                }.padding(.top, 50)
            }
        }
    }
}

 

6. Spacer() 사용 (위 아래 등 공간 주기)

import SwiftUI

struct MyTextView: View {
    
    var body: some View {
        VStack {
            Spacer()
            Text("배경 아이템 인덱스")
                .font(.system(size:30))
                .fontWeight(.bold)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            Spacer()
                
        }.background(Color.orange)
    }
    
}

 

7. @Binding : 값 전달

A -> B 로 화면 전환시 값 전달

A, B 각각의 파일에 @Binding 관련 아래 코드 적고 처리

struct MyVStackView: View {
    
    //데이터를 연동시킨다
    @Binding var isActivated: Bool
    
    //생성자
    init(isActivated: Binding<Bool> = .constant(false)) {
        _isActivated = isActivated
    }
 }

 

8. Cmd + Shift + L 누르면 여러가지 요소들을 바로바로 끌어다 쓸 수 있음 (Text, Image... 등등 외울 필요 X)

 

참고) https://www.youtube.com/watch?v=qY9N34mfCjQ&list=PLgOlaPUIbynqyJHiTEv7CFaXd8g5jtogT&index=2