使用 SwiftUI 设置 TabBar 项目徽章计数

Question

是否可以使用 SwiftUI 显示 TabItem 徽章？

使用 UIKit 很容易实现，就像这里描述的 ->

如何在标签栏中设置徽章值？

我没有找到使用 SwiftUI 执行此操作的方法。唯一可能的方法是使用场景 rootViewController 访问 UITabBarController 并直接修改其选项卡栏项目。

  func setBadgeCount(_ count: Int) {
    UIApplication.shared.applicationIconBadgeNumber = count

    guard let delegate = app.connectedScenes.first?.delegate as? SceneDelegate else {
        return
    }

    if let tabBarController = delegate.window?.rootViewController?.children.first {
      tabBarController.viewControllers?.first?.tabBarItem.badgeValue = "\(count)"
    }
  }

有什么想法如何使用原生 SwiftUI 方法来做到这一点吗？

Answer 1

目前，SwiftUI 没有徽章功能，因此我们必须自定义。

参考这里我用徽章创建了我的tabar

struct ContentView: View {
    private var badgePosition: CGFloat = 2
    private var tabsCount: CGFloat = 2
    @State var selectedView = 0
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .bottomLeading) {
                TabView {
                    Text("First View")
                        .tabItem {
                            Image(systemName: "list.dash")
                            Text("First")
                        }.tag(0)
                    Text("Second View")
                        .tabItem {
                            Image(systemName: "star")
                            Text("Second")
                        }.tag(1)
                }

                ZStack {
                  Circle()
                    .foregroundColor(.red)

                    Text("3")
                    .foregroundColor(.white)
                    .font(Font.system(size: 12))
                }
                .frame(width: 15, height: 15)
                .offset(x: ( ( 2 * self.badgePosition) - 0.95 ) * ( geometry.size.width / ( 2 * self.tabsCount ) ) + 2, y: -30)
                .opacity(1.0)
            }
        }
    }
}

Answer 2

现在在 SwiftUI 3 中他们添加了一个.badge()修饰符

资料来源：HackingWithSwift

TabView {
    Text("Your home screen here")
        .tabItem {
            Label("Home", systemImage: "house")
        }
        .badge(5)
}