Xcode 以简单的方式在SwiftUI中为选项卡视图选项卡项添加徽章值

是否可以在SwiftUI中以简单的方式为选项卡视图选项卡项添加徽章值

像这样（这里是普通的Swift）：

---

谢谢

SwiftUI中的TabViewItem没有徽章计数属性，因此您必须手动在TabViewItem顶部添加一个

ZStack

，并进行一些计算

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

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

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

---

这是可行的，但我遇到了一个问题，即当键盘打开时（对于文本字段），徽章会向上推。选项卡视图固定在底部，不会移动，但徽章会移动。有什么想法吗？请提供您的代码，我尝试添加TextField，但效果很好。为了避免使用键盘（iOS14引入）移动，请将.ignoresSafeArea（.keyboard）添加到附带的ZStack.works中，但不能再点击tab view项来代替徽章

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

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

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