如何在 SwiftUI 中的 TabView 的 tabItem 上显示徽章编号？

Question

我正在使用 SwiftUI 进行一个副项目，我有一个场景需要在 TabView.[=15= 的 tabItems 之一上显示徽章编号]

我已经为我的模型设置了一切，绑定等等。但我一直在寻找 2 天现在找到一个 modifier 来展示徽章，但不幸的是我所有的研究都面临死胡同。

我浏览了 Apple SwiftUI API TabView 的文档，并在此处搜索了堆栈溢出，当然还有大量 google 搜索结果的链接。

我正在观察一个包含项目列表的环境对象，并且我知道如何将徽章与我的项目计数绑定，因此当我有任何项目更新（添加、删除）时，徽章将被更新。但是我找不到在 tabItem.

上显示徽章编号本身的方法

非常感谢任何帮助！

Answer 1

没有用于在选项卡项目上设置徽章编号的修饰符，如果您尝试为其添加自定义视图，它将不可见；这是来自 TabView 文档：

Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

因此，我尝试了一种变通方法并且它有效。使用带 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)
}

如何在 SwiftUI 中的 TabView 的 tabItem 上显示徽章编号？

How to show a badge number on a tabItem of a TabView in SwiftUI?

swift

swiftui

ios13

tabview

iOS 15