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)")
}
}
}