SwiftUI) 화면전환 하는 방법들, NavigationLink, TabView, Sheet, Dismiss

---

SwiftUI에서 기본적으로 제공하는 화면전환 방식은 기존의 UIKit과 동일하게 Naviagtion, Tap 그리고 sheet가 있다. 즉 present방식과, push방식이 있다는 말이다.

1. NavigationLink를 이용한 화면 이동

NavigationLink를 사용하면, 버튼이나 텍스트 등을 탭하여 다른 뷰로 이동할 수 있다.

해당방식은 Push이다.

예시코드

swiftCopy code
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
    }
}

 

2. TabView를 이용한 탭 기반 화면 전환

TabView를 사용하면 여러 개의 탭으로 구성된 화면을 구현할 수 있다.

예시코드

swiftCopy code
struct ContentView: View {
    var body: some View {
        TabView {
            Text("First Tab")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            Text("Second Tab")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
        }
    }
}

 

3. Sheet를 이용한 모달 화면 표시

Sheet를 사용하면, 다른 뷰 위에 모달 형태로 화면을 띄울 수 있다.

예시코드

swiftCopy code
struct ContentView: View {
    @State var isPresented = false

    var body: some View {
        Button(action: {
            self.isPresented.toggle()
        }) {
            Text("Show Modal View")
        }
        .sheet(isPresented: $isPresented) {
            ModalView()
        }
    }
}

struct ModalView: View {
    var body: some View {
        Text("This is a modal view")
    }
}

Sheet는 모달방식으로 띄우기 때문에 해당 시트를 모디파이어 를 이용해서 바꾼다던지 하게 되면, 다양한 방식의 뷰를 처리할수 있을것 같다.

또한 Sheet는 기존의 fullScreen 형태가 아니기 때문에 동일한 방식이지만, FullScreen방식을 하기 위해서는

.fullScreenCover()

를 사용하면 된다.

 

4. ZStack을 이용한 방법

ZStack을 사용하면, 여러 개의 뷰를 겹쳐서 표시할 수 있다. 이를 이용하여 화면 전환을 구현할 수 있다.

예를 들어, 다음과 같이 코드를 작성할 수 있다.

swiftCopy code
struct ContentView: View {
    @State var showDetail = false

    var body: some View {
        ZStack {
            if showDetail {
                DetailView(showDetail: self.$showDetail)
            } else {
                VStack {
                    Button(action: {
                        self.showDetail = true
                    }) {
                        Text("Show Detail View")
                    }
                }
            }
        }
    }
}

struct DetailView: View {
    @Binding var showDetail: Bool

    var body: some View {
        VStack {
            Text("This is the Detail View")
            Button(action: {
                self.showDetail = false
            }) {
                Text("Dismiss")
            }
        }
    }
}

 

5. Present방식의 뷰를 Dismiss하는법

struct ModalView: View {
    @Environment(\\.dismiss) var dismiss
    
    var body: some View {
        Text("This is a modal view").onTapGesture {
            dismiss()
        }
    }
}

@Environment를 통해서 dismiss변수로 dismiss를 구현하면 사용이 가능하다.