CODEWITHSUNDEEP
swiftxcodeswiftui
Thiago Mundim
Thiago Mundim

Reputation: 533

How can I avoid nested Navigation Bars in SwiftUI?

Using SwiftUI, I've built a NavigationView that takes the user to another NavigationView, and finally, to a simple View. When I get to the last view, I can see two back buttons and a very large Navigation Bar.

GIF showing nested navigation bars

I'd like to have a navigation structure similar to the iOS Settings app, where one navigation list takes to another and each of them have one back button that goes back to the previous screen.

Does anyone know how to solve this?

Upvotes: 51

Views: 15442

Answers (3)

Sanjo
Sanjo

Reputation: 51

Do not use NavigationView to wrap your list in the "AppointmentView"

e.g.

NavigationView{
  List{
  }
}

But only use List in the "AppointmentView"

  List{
  }

you can still use NavigationLink inside that List

Upvotes: 0

SwiftyGonzales
SwiftyGonzales

Reputation: 11

If you create the Menu View with NavigationLinks but don't declare it inside a NavigationView, you'll get the child view without NavigationBar.

Upvotes: 0

rob mayoff
rob mayoff

Reputation: 385500

You should only have one NavigationView in your view hierarchy, as an ancestor of the menu view. You can then use NavigationLinks at any level of the hierarchy under that.

So, for example, your root view could be defined like this:

struct RootView: View {
    var body: some View {
        NavigationView {
            MenuView()
                .navigationBarItems(trailing: profileButton)
        }
    }

    private var profileButton: some View {
        Button(action: { }) {
            Image(systemName: "person.crop.circle")
        }
    }
}

Then your menu view has NavigationLinks to the appropriate views:

struct MenuView: View {
    var body: some View {
        List {
            link(icon: "calendar", label: "Appointments", destination: AppointmentListView())
            link(icon: "list.bullet", label: "Work Order List", destination: WorkOrderListView())
            link(icon: "rectangle.stack.person.crop", label: "Contacts", destination: ContactListView())
            link(icon: "calendar", label: "My Calendar", destination: MyCalendarView())
        }.navigationBarTitle(Text("Menu"), displayMode: .large)
    }

    private func link<Destination: View>(icon: String, label: String, destination: Destination) -> some View {
        return NavigationLink(destination: destination) {
            HStack {
                Image(systemName: icon)
                Text(label)
            }
        }
    }
}

Your appointment list view also contains NavigationLinks to the appointment detail views:

struct AppointmentListView: View {
    var body: some View {
        List {
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
        }.navigationBarTitle("Appointments")
    }

    private func link<Destination: View>(destination: Destination) -> some View {
        NavigationLink(destination: destination) {
            AppointmentView()
        }
    }
}

Result:

demo

Upvotes: 82

Related Questions