简单tabView使用
1、点击第一个页面,角标数逐次加1
2、再次点击第一个tabItem,tabitem角标置零消失
3、点击其他tabItem,正常换页面,但是不会影响第一个页面角标
⭐️注意:badge是在iOS15.0之后才支持




struct MenuVC: View {
@State private var selectedTab = 0
@AppStorage("num") var num:Int = 0
var body: some View {
let selection = Binding<Int>(
get: { self.selectedTab },
set: { self.selectedTab = $0
print("Pressed tab: \($0)")
if self.selectedTab == 0 {
num = 0
}
})
TabView(selection: selection) {
one()
.tabItem {
Group{
Text("phone")
Image(systemName: "phone")
}
}.badge(num)
.tag(0)
two()
.tabItem {
Text("message")
Image(systemName: "message")
}.onTapGesture {
num += 1
}
.tag(1)
three()
.tabItem {
Text("person")
Image(systemName: "person")
}.tag(2)
}
}
}
struct one : View {
@AppStorage("num") var num:Int = 0
var body: some View {
ZStack {
Color.red
Image(systemName: "phone")
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundColor(.white)
Text("\(num)").offset(x: 0, y: 100)
.foregroundColor(.white)
.font(.largeTitle)
}.onTapGesture {
num += 1
}
}
}
struct two : View {
var body: some View {
ZStack {
Color.blue
Image(systemName: "message")
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundColor(.white)
}
}
}
struct three : View {
var body: some View {
ZStack {
Color.green
Image(systemName: "person")
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.foregroundColor(.white)
}
}
}
网友评论