[SwiftUI] NavigationView 와 NavigationLink 사용법

NavigationView 와 NavigationLink 사용법

• 기본 사용법
  • NavigationView 로 표기할 내용을 감싼다
  • NavigationLink 로 새로운 view 를 표시 할 수 있다

struct TestView: View {
  var body: some View {
    NavigationView {
      // ...
      NavigationLink(
        destination: Text("새로운 View")) {
        Text("navition link 의 label")
      }
    }
  }
}

• 위 코드를 ipad 같은 가로로 넓은 화면으로 보면 navigationview 가 왼쪽에 가려져서 바로 보이지 않는다.

 

• 이 때는 NavigationView 에 .navigationViewStyle(StackNavigationViewStyle()) 설정을 해주면 된다.

• NavigationLink 를 통해 타고 들어가다가 어느 순간에 버튼 한번으로 Root 로 돌아오고 싶을 경우 아래와 같이 할 수 있다.
  1. @State 로 state 를 저장 할 변수를 설정한다
     • @State var firstNaviLinkActive: Bool = false
  2. 첫번째 NavigationLink 의 isActive 파라미터에 state 변수를 넣어준다. (이때, $를 이용해서 state 변수임을 알려준다.)
     • NavigationLink(..., isActive: $firstNaviLinkActive)
  3. NavigationLink 로 연결된 View 에 state 변수를 연결 할 수 있도록 @Binding 한다. (이때, $를 이용해서 state 변수임을 알려준다.)
     • Test2View(firstNaviLinkActive: $firstNaviLinkActive)
     • @Binding var firstNaviLinkActive: Bool
  4. 버튼의 action 에서 state 값을 false 로 변경하면 처음 view 로 돌아가게 된다.
     • 첫번째 NavigationLink 의 활성화를 false 로 변경한다 == 처음 화면으로 돌아간다
     • Button(action: { firstNaviLinkActive = false}, ...

struct TestView: View {
    @State var firstNaviLinkActive: Bool = false
    var body: some View {
        NavigationView {
          // ...
          NavigationLink(
            destination: Test2View(firstNaviLinkActive: $firstNaviLinkActive),
            isActive: $firstNaviLinkActive) {
                Text("Test2View 보기")
                    .foregroundColor(.green)
          }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct Test2View: View {
    @Binding var firstNaviLinkActive: Bool
    var body: some View {
        NavigationLink(
          destination: Test3View(firstNaviLinkActive: $firstNaviLinkActive)) {
            Text("Test3View 보기")
                .foregroundColor(.red)
        }
    }
}

struct Test3View: View {
    @Binding var firstNaviLinkActive: Bool
    var body: some View {
        Button(action: { firstNaviLinkActive = false}, label: {
            Text("처음 View(Test1View) 로")
        })
    }
}