如何在 SwiftUI 中的 TabView 的 tabItem 上顯示徽章編號？

Question

我正在使用 SwiftUI 開展一個附帶項目，並且我有一個場景，我需要在我的tabItems的一個TabView上顯示一個徽章編號。

我用我的模型和綁定等設置了所有東西。 但是我一直在尋找2天來找到一個顯示徽章的modifier ，但不幸的是我所有的研究都面臨了死胡同。

我瀏覽了 Apple SwiftUI API 文檔的TabView並在此處搜索堆棧溢出，當然還有大量的谷歌搜索結果鏈接。

我正在觀察一個環境 object ，它包含一個項目列表，我知道如何將徽章與我的項目數綁定，所以當我有任何項目更新（添加、刪除）時，徽章將被更新。 但是我找不到在tabItem上顯示徽章編號本身的方法。

非常感謝任何幫助！

Answer 1

沒有用於在選項卡項目上設置徽章編號的修飾符，如果您嘗試為此添加自定義視圖，它將不可見； 這是來自 TabView 文檔：

選項卡視圖僅支持文本、圖像或圖像后跟文本類型的選項卡項。 傳遞任何其他類型的視圖會導致可見但為空的選項卡項。

所以，我嘗試了一種解決方法，它有效。 使用帶有 GeometryReader 的 ZStack 和一些計算將自定義徽章視圖放置在正確的位置。

struct ContentView: View {
  @State private var badgeNumber: Int = 3
  private var badgePosition: CGFloat = 3
  private var tabsCount: CGFloat = 3

  var body: some View {
    GeometryReader { geometry in
      ZStack(alignment: .bottomLeading) {
        // TabView
        TabView {
          Text("First View")
            .tabItem {
              Image(systemName: "1.circle")
              Text("First")
          }.tag(0)

          Text("Second View")
            .tabItem {
              Image(systemName: "2.circle")
              Text("Second")
          }.tag(1)

          Text("Third View")
            .tabItem {
              Image(systemName: "3.circle")
              Text("Third")
          }.tag(2)
        }

        // Badge View
        ZStack {
          Circle()
            .foregroundColor(.red)

          Text("\(self.badgeNumber)")
            .foregroundColor(.white)
            .font(Font.system(size: 12))
        }
        .frame(width: 20, height: 20)
        .offset(x: ( ( 2 * self.badgePosition) - 1 ) * ( geometry.size.width / ( 2 * self.tabsCount ) ), y: -30)
        .opacity(self.badgeNumber == 0 ? 0 : 1)
      }
    }
  }
}

github 上提供的示例項目： https://github.com/aelzohry/TabBarSwiftUI

Answer 2

iOS 15

我們現在可以使用在列表行和標簽欄中可用的原生badge修飾符：

TabView {
    Text("Tab One")
        .tabItem {
            Text("Home")
            Image(systemName: "house")
        }
        .badge(3)
}

Answer 3

如果我正確理解您的問題，那么您必須通過 tabBarController 的 tabBar 項目 go 並選擇您需要的項目，如下所示：

if let tabItems = tabBarController?.tabBar.items {
            let tabItem = tabItems[1] // Or whatever tab you need
            if value != 0 {
                tabItem.badgeValue = String(value)
            } else {
                tabItem.badgeValue = nil
            }
        }