SwiftUI 中的自定义 TabView 导航

Question

我正在尝试为我的应用程序创建自定义 TabView。我已经遵循了一个教程，但是我无法根据按下的按钮来改变视图。我的代码在下面，用于显示在我的 TabView 上的按钮。当按下这个按钮时，我希望显示 HomeView，当按下帐户按钮时，我希望显示 AccountView etyc 等

我想知道如何解决这个问题。我曾尝试使用 NavLinks 但没有成功，因为我无法使用动画。

我是 SwiftUI 的新手，正在努力学习。

谢谢

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

Answer 1

您可以使用@State 变量来决定应该向用户显示哪个视图。然后根据点击的按钮设置此变量的值。我已经编写了非常简单的代码来展示这个想法。

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

它是这样工作的：

SwiftUI 中的自定义 TabView 导航

Custom TabView navigation in SwiftUI

ios

swift

swiftui

swiftui-tabview