Custom Navigation Button

Custom Navigation Button 만들기

 

커스텀 네비게이션 버튼을 만들기 위해서는 먼저 .toolbar 를 사용해야합니다. ToolbarItem 을 사용하여 placement 를 .navigationBarTrailing 으로 지정하여 네비게이션 상단 우측 버튼 위치에 원하는 버튼을 만들어줍니다.

struct ContentView: View {
   @Environment(ApplicationData.self) private var appData

   var body: some View {
      NavigationStack {
         List(appData.userData) { book in
            CellBook(book: book)
         }.navigationTitle(Text("Books"))
         .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
               NavigationLink(destination: SettingsView(), label: {
                  Image(systemName: "gearshape")
               })
            }
         }
      }
   }
}

 

Custom Navigation Back Button 만들기

 

Custom Navigation Back Button 을 만들기 위해서는 먼저 기존에 있는 뒤로가기 버튼을 .navigationBarButtonHidden 을 true 로 설정하여 없애고 그 자리에 .navigationBarLeading 으로 설정한 후 버튼을 만들어 대체하였습니다. 버튼을 클릭하게 된다면 @Environment(\.dismiss) 를 사용하여 초기 뷰로 돌아가게 합니다.

struct SettingsView: View {
   @Environment(\.dismiss) var dismiss
   @State private var showPictures: Bool = true
   @State private var showYear: Bool = true

   var body: some View {
      Form {
         Toggle("Show Pictures", isOn: $showPictures)
         Toggle("Show Year", isOn: $showYear)
      }.navigationTitle("Settings")
      .navigationBarBackButtonHidden(true)
      .toolbar {
         ToolbarItem(placement: .navigationBarLeading) {
            Button("Go Back") {
               dismiss()
            }
         }
      }
   }
}