[iOS/SwiftUI] 기초적인 Navigation 구현하기

NavigationView 사용하기

var body: some View {
        NavigationView {
            List(artworks) { artwork in
                // Add views to the navigation stack with NavigationLink.
                NavigationLink(
                    destination: DetailView(artwork: artwork),
                    label: {
                        Text(artwork.title)
                    })
            }
            .listStyle(PlainListStyle())
            // Notice that this modifier is for List. (Not NavigationView.)
            .navigationBarTitle("Artworks")
        }
}

Bool 변수를 toggle 해서 sheet 띄우기

Bool 변수를 @State 로 선언해서 sheet 를 띄운 상태를 true, 내린 상태를 false 로 설정한다. 화면 전체를 덮고 싶다면 .fullScreenCover(isPresented:) 을 사용한다. 이 경우 sheet 를 내릴 버튼을 별도로 만들어야 한다.

 

struct ContentView: View {
    @State private var showMap = false

    var body: some View {
        VStack {
            Button(action: { showMap = true }) {
                HStack {
                    Image(systemName: "mappin.and.ellipse")
                    // locationName is an arbitrary variable for example.    
                    Text(locationName).font(.headline)
                }
            }
            // Navigate to LocationMap view with fully covered screen.
            .fullScreenCover(isPresented: $showMap) {
                // Pass showMap so that the LocationMap view controller can 
                // toggle the variable in order to dismiss the view.
                LocationMap(location: locationName, showModal: $showMap)
            }
        }
    }
}

 

아래는 sheet 가 될 View 인 LocationMap 이다. .fullScreenCover 를 통해 띄우므로 Bool 변수를 false 로 만들어 이전 화면으로 돌아갈 수 있는 버튼을 작성해야 한다.

 

 

struct LocationMap: View {
    var location: Location
    @Binding var showModal:Bool

    var body: some View {
        VStack {
            Text(self.location)
            Button("Done") { showModal = false }
        }
    }
}

NavigationView 의 Split View

화면이 큰 모델 (아이폰 + 모델이나 아이패드) 에서 NavigationView 를 사용하는 경우 자동으로 분할된 화면을 구성한다. 아래 코드는 기본적으로 "Secondary" 텍스트가 화면을 차지하고 왼쪽의 슬라이드 화면으로 "Primary"를 볼 수 있게 구성된다. 

 

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        }
    }
}

 

기종에 상관없이 한 번에 하나의 화면만 보고 싶다면 다음 옵션을 사용한다.

 

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("First")
            Text("Secondary")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}