Custom TabView navigation in SwiftUI

Question

I am trying to create a a custom TabView for my app. I have followed a tutorial for this but i am unavble to get the view to change depending on what button is pressed. My code is below for a button displayed on my TabView. when this is pressed i want HomeView to show and when the Account button is pressed to show AccountView etyc etc.

I was wondering how i can get around this. I have tried using NavLinks but with no luck as i unable to use the animation.

I am new to SwiftUI and trying to learn as i go.

Thank you

Button{
            
            withAnimation{
                index = 0
            }
            
        }
        label: {
                
            HStack(spacing: 8){
                
                Image(systemName: "house.fill")
                    .foregroundColor(index == 0 ? .white : Color.black.opacity(0.35))
                    .padding(10)
                    .background(index == 0 ? Color("BrightGreen") : Color.clear)
                    .cornerRadius(8)
                
                Text(index == 0 ? "Home" : "")
                    .foregroundColor(.black)
            }
        }

score 3 · Accepted Answer · answered Dec 09 '20 at 10:35

You can use @State variable to decide which view should be shown to user. Then depending on what button is tapped set value of this variable. I've made really simple code to show the idea.

// Views to show
struct HomeView: View {
  var body: some View {
    Text("Home View")
  }
}

struct AccountView: View {
  var body: some View {
    Text("Account View")
  }
}

// Enum containing views available in tabbar
enum ViewToDisplay {
  case home
  case account
}

struct ContentView: View {
  @State var currentView: ViewToDisplay = .home
  var body: some View {
    VStack {
      switch currentView{
      case .home:
        HomeView()
        
      case .account:
        AccountView()
      }
      Spacer()
      // Tabbar buttons
      HStack {
        Button(action: { currentView = .home }) { Text("Home") }
        Button(action: { currentView = .account }) { Text("Account") }
      }
    }
  }
}

It works like this:

Custom TabView navigation in SwiftUI

1 Answers1