簡體   English   中英

SwiftUI 中的自定義 TabView 導航

[英]Custom TabView navigation in SwiftUI

我正在嘗試為我的應用創建一個自定義 TabView。 我已經按照這個教程進行操作,但是我無法根據按下的按鈕來改變視圖。 下面是我的 TabView 上顯示的按鈕的代碼。 按下此按鈕時,我希望顯示 HomeView 以及按下 Account 按鈕以顯示 AccountView etyc 等。

我想知道如何解決這個問題。 我曾嘗試使用 NavLinks,但沒有運氣,因為我無法使用 animation。

我是 SwiftUI 的新手,並試圖像我一樣學習 go。

謝謝

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

您可以使用 @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") }
      }
    }
  }
}

它是這樣工作的:

在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM