Swift UI

SwiftUI-创建TabView

2022-06-25  本文已影响0人  江湖闹士

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

第一个页面 点击第一个页面,角标加1 第二个页面 第三个页面
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)
        }
    }
}
上一篇下一篇

猜你喜欢

热点阅读