SwiftUI 튜토리얼(2)

onTapGesture

• 탭 하였을 때 작동할 코드를 작성한다.
  

struct ContentView: View { // View
    var body: some View {
        HStack{
            // HStack안에 VStack을 3개 넣음
            MyVStackView()
            MyVStackView()
            MyVStackView()
        } // HStack
        .padding(10)
        .background(Color.blue)
        .onTapGesture { // 탭 제스쳐 추가
            print("HStack이 클릭됨")
        }
    }
}

• 정상적으로 print 된 모습

@State

• 값의 변화를 감지하고 그 변화를 뷰에 적용시킨다.
  
• HStack이 클릭 되고 배경색이 변경된 모습

struct ContentView: View { // View
    @State  // 값의 변화를 감지 -> 뷰에 적용
    private var isActived: Bool = false
    var body: some View {
        HStack{
            // HStack안에 VStack을 3개 넣음
            MyVStackView()
            MyVStackView()
            MyVStackView()
        } // HStack
        .padding(10)
        .background(isActived ? Color.blue : Color.black) // isActived가 만약 True일 땐 배경이 파란색이고 아닐 때엔 검은색으로 설정
        .onTapGesture { // 탭 제스쳐 추가
            print("HStack이 클릭됨")
            self.isActived.toggle() // toggle() = isActived 가 True 이면 False로 False이면 True로 변경
        }
    }
}

---

• toggle() -> True면 False로 False이면 True로 변경

withAnimation

• 애니메이션 효과를 적용시켜주는 함수
  

struct ContentView: View { // View
    @State  // 값의 변화를 감지 -> 뷰에 적용
    private var isActived: Bool = false
    var body: some View {
        HStack{
            // HStack안에 VStack을 3개 넣음
            MyVStackView()
            MyVStackView()
            MyVStackView()
        } // HStack
        .padding(isActived ? 50 : 10)
        .background(isActived ? Color.blue : Color.black) // isActived가 만약 True일 땐 배경이 파란색이고 아닐 때엔 검은색으로 설정
        .onTapGesture { // 탭 제스쳐 추가
            print("HStack이 클릭됨")
            withAnimation { // 애니메이션 효과 적용
                self.isActived.toggle() // toggle() = isActived 가 True 이면 False로 False이면 True로 변경
            }
        }
    }
}

NavigaitionView

• Navigaition 링크를 통해 새로운 뷰로 넘어가는 것을 지칭
  

struct ContentView: View { // View
    @State  // 값의 변화를 감지 -> 뷰에 적용
    private var isActived: Bool = false
    var body: some View {
        NavigationView{
            VStack{
                HStack{
                    // HStack안에 VStack을 3개 넣음
                    MyVStackView()
                    MyVStackView()
                    MyVStackView()
                } // HStack
                .padding(isActived ? 50 : 10)
                .background(isActived ? Color.blue : Color.black) // isActived가 만약 True일 땐 배경이 파란색이고 아닐 때엔 검은색으로 설정
                .onTapGesture { // 탭 제스쳐 추가
                    print("HStack이 클릭됨")
                    withAnimation { // 애니메이션 효과 적용
                        self.isActived.toggle() // toggle() = isActived 가 True 이면 False로 False이면 True로 변경
                    }
                }
                NavigationLink(destination: MyTextView() ){ // NavigationLink를 클릭하면 MyTextView()View로 넘어간다.
                    Text("네비게이션") // 네비게이션링크에 대한 설정
                        .fontWeight(.heavy)
                        .font(.system(size: 40))
                        .padding()
                        .background(Color.orange)
                        .foregroundColor(Color.white)
                        .cornerRadius(30)
                }
                .padding(.top, 50)
            } // VStack
        } // NavigationView
    }
}

• 우선 그동안 작업했던 Stack 뷰들을 네비게이션 뷰 안에 집어넣는다.
• 그후 네비게이션링크에 대한 설정과 링크를 클릭했을 때 넘어가는 View를 설정해준다.
  

struct MyTextView: View {
    @State  // 값의 변화를 감지 -> 뷰에 적용
    private var index: Int = 0
    private let backgroundColors = [ // 배경색 배열
        Color.red,
        Color.yellow,
        Color.blue,
        Color.green,
        Color.orange
    ]
    var body : some View {
        VStack{
            Spacer() // Text("배경 아이템 인덱스") 위에 공간을 채워준다.
            Text("배경 아이템 인덱스 \(self.index)")
                .font(.system(size: 30))
                .fontWeight(.bold)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) // frame으로 꽉채운다.
            Spacer() // Text("배경 아이템 인덱스") 아래의 공간을 채워준다.
        }
        .background(backgroundColors[index]) // background의 색을 backgroundColors 배열 안에 있는 색으로 지정
//        .edgesIgnoringSafeArea(.all)
        .onTapGesture {
            print("배경아이템이 클릭됨")
            if(self.index == self.backgroundColors.count - 1){ // self.index가 backgroundColors의 마지막 인덱스를 지칭하면 0으로 초기화
                self.index = 0
            } else {
                self.index += 1
            }
        }
    }
}

• 네비게이션링크를 클릭했을 때 넘어갈 MyTextView를 새롭게 파일을 만든다.
• VStack을 탭 할때 마다 배경의 색이 바뀌게끔 설정한다.

---

동영상 강의 링크