当前,SwiftUI没有徽章功能,因此我们必须自定义。
参考文献HERE我创建了带有徽章的工作服
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)
}
}
}
}
,
func calculateBadgeXPos(width: CGFloat) -> CGFloat {
let t = (2*CGFloat(self.selectedTab))+1
return CGFloat(t * width/(2*CGFloat(TABS_COUNT)))
}
然后在这里使用它:
GeometryReader { geometry in
ZStack(alignment: .bottomLeading) {
// make sure to update TABS_COUNT
TabView(selection: self.$selectedTab) {
...
}
NotificationBadge(...)
.offset(x: self.calculateBadgeXPos(width: geometry.size.width),y: -28)
}
}
在Preview
上看起来像这样
,
现在在 SwiftUI 3 中,他们添加了 .badge()
修饰符
来源:HackingWithSwift
TabView {
Text("Your home screen here")
.tabItem {
Label("Home",systemImage: "house")
}
.badge(5)
}
,
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Text("Home")
}
Text("Home")
.tabItem {
Text("Home")
}
Text("Home")
.tabItem {
Text("Home")
}
}
.introspectTabBarController { (tabbarController) in
if let items = tabbarController.tabBar.items {
let tabItem = items[2]
tabItem.badgeValue = "1"
}
}
}
}
本文链接:https://www.f2er.com/2950363.html