[iOS - SwiftUI] NavigationView, NavigationLink 사용 방법

목차) SwiftUI의 기본 - 목차 링크

NavigationView

• 뷰들의 관계를 push와 pop을 통해 계층 관계를 이루게끔 하는 뷰 (수평 관계는 TabView로 사용)

https://developer.apple.com/documentation/swiftui/navigationview

• iOS 16.0부터 Deprecated되었다는게 가장 중요
• iOS 16.0부터는 NavigationStack 사용

NavigationView, NavigationLink 사용 방법

• 클로저 하위 뷰들을 안에넣어서 사용
  • cf) 가장 상위에는 TabView 그 다음에 NavigationView가 위치해야함

struct ContentView: View {
  var body: some View {
    NavigationView {
      Text("Hello, world!")
    }
  }
}

• NavigationLink
  • 네비게이션 형태로 presentation을 제어하는 뷰

struct NavigationLink<Label, Destination> where Label : View, Destination : View

https://developer.apple.com/documentation/swiftui/navigationlink

• 도착지에 해당하는 뷰와 타이틀에 들어갈 Label를 넣어서 사용
  • NavigationView 하위에서 사용

struct ContentView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: Text("Detail View")) {
        Text("Hello World")
      }
    }
  }
}

• 하나의 NavigationView안에 여러개의 NavigationLink 사용 가능

struct ContentView: View {
  var body: some View {
    NavigationView {
      VStack {
        NavigationLink(destination: Text("Detail View1")) {
          Text("Link1")
        }
        NavigationLink(destination: Text("Detail View2")) {
          Text("Link2")
        }
        NavigationLink(destination: Text("Detail View3")) {
          Text("Link3")
        }
      }
    }
  }
}

• List안에 NavigationLink를 사용하면 아래와 같은 화면이 생성

var body: some View {
  NavigationView {
    List { // <-
      NavigationLink(destination: Text("Detail View1")) {
        Text("Link1")
      }
      NavigationLink(destination: Text("Detail View2")) {
        Text("Link2")
      }
      NavigationLink(destination: Text("Detail View3")) {
        Text("Link3")
      }
    }
  }
}

.navigationTitle

• NavigationView 하위 뷰에 타이틀을 붙이는 것
• NavigationView 하위 뷰에 .navigationTitle(:)로 사용

var body: some View {
  NavigationView {
    List {
      NavigationLink(destination: Text("Detail View1")) {
        Text("Link1")
      }
      NavigationLink(destination: Text("Detail View2")) {
        Text("Link2")
      }
      NavigationLink(destination: Text("Detail View3")) {
        Text("Link3")
      }
    }
    .navigationTitle("Title") // <-
  }
}

* 전체 코드: https://github.com/JK0369/ExNavigationView

* 참고

https://developer.apple.com/documentation/swiftui/navigationlink

https://developer.apple.com/documentation/swiftui/navigationview

https://developer.apple.com/documentation/swiftui/navigationstack