在 SwiftUI 中以简单的方式为 TabView tabItem 添加徽章值

Posted 2023-03-29

【中文标题】在 SwiftUI 中以简单的方式为 TabView tabItem 添加徽章值

【英文标题】：Add a badge value in SwiftUI in a simple way for a TabView tabItem

【发布时间】：2020-07-16 06:14:46

【问题描述】：

是否可以在 SwiftUI 中为 TabView tabItem 以简单的方式添加徽章值？

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

import UIKit

class TabBarController: UITabBarController 

override func viewDidAppear(_ animated: Bool) 
    super.viewDidAppear(animated)

    self.tabBar.items![2].badgeValue = "7"

谢谢

【参考方案1】：

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)
      
    
  

【讨论】：

这行得通，但我遇到了一个问题，即打开键盘时徽章被向上推（对于文本字段）。 TabView 保持固定在底部并且不会移动，但徽章会移动。有什么想法吗？

能否请您提供您的代码，我尝试通过添加 TextField 但效果很好。

为避免随键盘移动（ios14 引入）将 .ignoresSafeArea(.keyboard) 添加到封闭的 ZStack。

有效，但不能再点击选项卡视图项代替徽章

@PeterKreinz 我知道已经很晚了，你可以在徽章 zStackView 上添加 onTap 手势