Navigation in SwiftUI with multiple views

Navigation in SwiftUI video

Download Complete Login app with Laravel API

I was trying to build a simple app in iOS + SwiftUI with multiple views that uses NavigationView and NavigationLink.

This app is very simple and uses a model to navigate between destinations. Enum ViewType tracks all the destinations. If you want to have another view, View4, just add a new case in ViewType enum.

struct Menu: Identifiable {
    var id = UUID()
    var name: String
    var image: String
    var destination: ViewType
}

enum ViewType {
    case home
    case view1
    case view2
}

Our all views must have a property with menu type

struct HomeView: View {
    var menu: Menu
    
    var body: some View {
        Text("Home View")
    }
}

Our MasterView which is the main view in root ContentView. Also, we added HomeView as our default view here.

var body: some View {
        NavigationView {
            MasterView()
                .navigationBarTitle(
                    Text("Navigation Demo")
                )
            HomeView(menu: Menu(name:"Home",      image:"image",  destination:    .home))
        }.navigationViewStyle(DefaultNavigationViewStyle())
  }

In our MasterView we have an array of Menu with title and destination view case, which populated in a list view.

let  view1 =  Menu(name:"Home",      image:"image",  destination:    .home)
let  view2 =  Menu(name:"View 1",          image:"image",  destination:    .view1)
let  view3 =  Menu(name:"View 3",       image:"image",  destination:    .view2)

var body: some View {
        let menus: [Menu] = [view1, view2, view3]

        return List {
            ForEach(menus) { menu in
                self.destinationView(menu: menu)
            }
        }
}

function destinationView return a NavigationLink based on what item you choose on the list and take the user to the expected view.

func destinationView(menu: Menu) -> some View {
        
        switch menu.destination {
            case .view1:
                return NavigationLink(
                    destination: AnyView(View1(menu: menu))
                )
                {
                    Text("\(menu.name)")
                }
            case .view2:
                   return NavigationLink(
                       destination: AnyView(View2(menu: menu))
                   )
                   {
                       Text("\(menu.name)")
                   }
            default:
               return NavigationLink(
                   destination: AnyView(HomeView(menu: menu))
               )
               {
                   Text("\(menu.name)")
               }
        }
        
    }

Download the source code

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •