28. [SwiftUI] NavigationView, NavigationLink

화면이동을 위해 간단하지만 강력한 네비게이션 뷰, 링크에 대해 알아보자.

뷰 계층에는 '하나의 네비게이션 뷰'가 있어야 한다. 네비게이선 뷰가 여러개면 네비게이션 바가 여러개 생기는 불상사가...

다른 뷰로 세그웨이(이동)하고 싶으면 네비게이션 링크를 활용하면 된다.

 

네비게이션뷰, 링크를 활용하면 기본적인 화면전환 애니메이션(push & pop)을 제공받고,

각 화면별 네비게이션 타이틀을 다르게 설정할 수도 있으며

필요한 경우에 특정 뷰에서만 네비게이션바를 사라지게 할 수도 있다.

또한 leading, trailing 네비게이션바 아이템도 버튼처럼 활용 가능하다.(스택도 사용 가능!)

 

//  Created by Toughie on 2023/04/27.
//

import SwiftUI

struct Navigation: View {
    var body: some View {
    //네비게이션 뷰 안에 스크롤뷰 삽입.
    //네비게이션 뷰는 뷰 계층에서 하나만 존재해야한다.
        NavigationView {
            ScrollView {
            //다음뷰로 이동하기 위한 네비게이션 링크, 버튼처럼 작동한다고 생각하면 된다.
                NavigationLink("Hello, world!", destination: MyScreen())
                
                Text("HI")
                Text("HI")
                Text("HI")
                
            }
            //네비게이션 타이틀 관련 모디파이어
            
            //네비게이션 타이틀 설정(기본)
            .navigationTitle("Navigation Title")
            //네비게이션 타이틀이 커지거나 작아지지 않고 한 줄로 계속 보임
			//.navigationBarTitleDisplayMode(.inline)
			//네비게이션 타이틀 크게
            //            .navigationBarTitleDisplayMode(.large)
            //네비게이션 타이틀 크기 자동으로
            //            .navigationBarTitleDisplayMode(.automatic)
            //네비게이션바 숨기기(타이틀,백버튼 다 숨겨짐)
            //            .navigationBarHidden(true)
            
            //네비게이션 바 아이템 설정
            .navigationBarItems(
        	//리딩(korean 설정에서는 왼쪽)
                leading:
                //VStack, HStack 활용 가능(근데 HStack만 쓰는 경우가 대부분일듯)
                    HStack {
                        Image(systemName: "person.fill")
                        Image(systemName: "flame.fill")
                    },
                    //우측 버튼
                trailing: NavigationLink(destination: MyScreen(), label: {
                    Image(systemName: "gear")
                })
                //네비게이션 링크 accentColor
                .accentColor(.red)
                )
        }
    }
}

struct MyScreen: View {
    //.navigationBarHidden(true)일 경우 dismiss하기 위해 
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            Color.green.opacity(0.5).ignoresSafeArea()
                .navigationTitle("Green Screen")
            //                .navigationBarHidden(true)
            
            VStack {
                Button("Back Button") {
                    presentationMode.wrappedValue.dismiss()
                }
                .padding(.vertical, 100)
                NavigationLink("Next", destination: Text("Third Screen"))
            }
        }
    }
}