[SwiftUI] NavigationView

NavigationView Deprecated

A view for presenting a stack of views that represents a visible path in a navigation hierarchy

 

Deprecated (22. 9. 12.)
Use NavigationStack and NavigationSplitView instead. For more information, see Migrating to new navigation types.

Use a NavigationView to create a navigation-based app in which the user can traverse a collection of views. Users navigate to a destination view by selecting a NavigationLink that you provide. On iPadOS and macOS, the destination content appears in the next column. Other platforms push a new view onto the stack, and enable removing items from the stack with platform-specific controls, like a Back button or a swipe gesture.

 

NavigationView를 사용하여 사용자가 views 모음을 이동할 수 있는 탐색 기반 앱을 만듭니다. 사용자가 제공하는 NavigationLink를 선택하여 대상 보기로 이동합니다.

보여주고 싶은 View를 Wrapping 하는 것을 코드로 예제를 들면서 보이도록 하겠습니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("What does the fox say? 🦊")
        }
    }
}

 

Setting NavigationView

 

navigationTitle

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("What does the fox say?")
                .navigationTitle("Fox 🦊")
        }
    }
}

 

NavigationBarTitleDisplayMode

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("What does the fox say?")
                .navigationTitle("Fox 🦊")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Default value는 .large 이기에 이전 title 보이는 것과 동일

 

navigationBarHidden

struct stateTestView: View {
    var body: some View {
        NavigationView {
            Text("What does the fox say?")
                .navigationTitle("Fox 🦊")
                .navigationBarHidden(true)
        }
    }
}

 

navigationBarItems

struct stateTestView: View {
    var body: some View {
        NavigationView {
            Text("What does the fox say?")
                .navigationTitle("Fox 🦊")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: Text("front"), trailing: Text("back"))
        }
    }
}

leading, trailing 둘 중 한 가지만 써도 되고 텍스트가 아닌 이미지도 사용할 수 있습니다.

 

navigationLink

struct stateTestView: View {
    var body: some View {
        NavigationView {
            HStack {
                Text("What does the fox say?")
                
                NavigationLink(destination: ContentView()) {
                    Image(systemName: "beats.headphones")
                }
            }
                .navigationTitle("Fox 🦊")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: Image(systemName: "arrowshape.turn.up.left.circle.fill"))
        }
    }
}