[SwiftUI] NavigationView & NavigationLink (기본)

---

■ NavigationView : 지금 버전에서 사용되지 않음

: 탐색 계층 구조에서 표시 가능한 경로를 나타내는 뷰 스택을 표시하기 위한 뷰임

- 현재는 Stack을 사용

 

■ NavigationStack

: 탐색 계층 구조에서 표시 가능한 경로를 나타내는 뷰 스택을 표시하기 위한 뷰임 ( View와는 차이가 있음 )

- NavigationView 안에 하위 뷰를 넣어서 사용함

- 사용자는 NavigationLink를 선택하여 대상 보기로 이동함

struct NavigationView<Content> where Content : View

---

> NavigationLink를 여러개 사용하기 위해선 ( > : 하위  )

1. List

2.VStack /  HStack

3.NavigationStack

 

1. NavigationView > List > NavigationLink

NavigationView {
	List {
		NavigationLink{...}
		NavigationLink{...}
        	.navigationTitle("리스트사용")
	}
}

 

2. NavigationStack > VStack or HStack > NavigationLink

NavigationView {
	VStack {
		NavigationLink{...}
		NavigationLink{...}
        	.navigationTitle("스택사용")
	}
}

NavigationView {
	HStack {
		NavigationLink{...}
		NavigationLink{...}
        	.navigationTitle("스택사용")
	}
}

 

 

---

□ NavigationStack & NavigationView 비교

-View의 경우 : 새로운 뷰가 현재 뷰 아래에 표시됨

-Stack의 경우 : 새로운 뷰가 뷰 위를 완전히 덮음

view / stack

---

■ NavigationLink

: 원하는 화면으로 이동하거나, 전 화면으로 되돌아가는 등 다양한 화면 전환 기능이 있음

- NavigationStack(View)의 하위 뷰로 쓰임 

- NavigationStack(View) 영역에 전환된 화면이 보임

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

 

> Label : View

- NavigationView에 나타낼 텍스트나 모양

 

> Destination : View

- 클릭 시 이동할 뷰

- 다른 SwiftUIView 불러오기 가능

 

ex )

SwiftUIView 이름이 mypage인 경우,

destination 작성 부분에 mypage() 작성해주면 뷰가 표시됨

 

> Label, Destination  둘 다 View 프로토콜 : 인터페이스의 일부를 나타내고 보기를 구성하는데 사용하는 수정자를 제공하는 유형

---

□ NavigationLink 사용방법

NavigationLink(destination: () -> View, label: () -> View)

 

예제 1 )

() 안에 destination {} 안에 label

NavigationLink(destination: Text("목적지")) {
    Text("클릭") // or Mypage()
}

 

예제 2 )

() 안에 label {} 안에 destination

NavigationLink("클릭") {
	Text("목적지") // or Mypage()
}

 

예제 3 )

{1} 안에 destination, {1} 뒤에 label : {2} 쓴 후 {2}에 label

 NavigationLink{
	Text("목적지") // or Mypage()
} label: {
	Text("클릭")
	}

 

 

---