在SwiftUI中以一种简单的方式为TabView选项卡项添加徽章值

Question

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

像这样(这里是正常的Swift(：

import UIKit
class TabBarController: UITabBarController {
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.tabBar.items![2].badgeValue = "7"
}
}

感谢

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