[SwiftUI] NavigationView

NavigationView는 UIKit의 UINavigationController역할을 한다.

 

보여주고싶은  View를 NavigationView로 감싸주기만 하면 된다.

 

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
        }
    }
}

 

추가를 하면 NavigationBarTitle이나 NavigationItem을 추가해줘야 GNB영역이 나오게 된다.

 

NavigationBarTitle을 보여주는 방법

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
            .navigationBarTitle("clamp", displayMode: .inline)
        }
    }
}

displayMode에 들어갈 수 있는건 automatic, inline, large 3가지가 있다. 기본은 automatic

 

 

NavigationBarItem을 추가하는 방법

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
            .navigationBarTitle("clamp", displayMode: .inline)
            .navigationBarItems("leading: ,trailing: )
        }
    }
}

 

NavigationBarItem에 NavigationLink를 추가하는 방법

 

화면 전환 기능을 넣기 위해선 NavigationLink를 사용해야 한다.

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
            .navigationBarTitle("clamp", displayMode: .inline)
            .navigationBarItems(trailing:
                NavigationLink(
                destination: DataInputView(),
                lavel: { Text("추가")}))
        }
    }
}

trailing(우측)에 NavigationLink를 이용해서 DataInputView로 이동하게 되며 버튼의 이름은 "추가"이다.

---

이제 NavigationBarTitle과 NavigationBarItems을 사용하지 않는다.

future version에서 deprecate된다고 한다. 대신 toolbar를 사용한다.

 

toolbar를 사용하여 NavigationItem 만들기.

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
            .toolbar{ 
                ToolbarItem(placement: .navigationBarLeading){
                    Button(action: {
                    //
                    },  label: {
                        Text("버튼")
                    })
        }
    }
}

ToolbarItem은 iOS14부터 사용이 가능하다.

 

navigationBarTitle역시 depreacte되었다.

navigationTitle을 사용한 방법.

struct navigationTest: View{
    var body: some View{
        NavigationView{
            Text("Hello")
            .navigationTitle("약")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}