美文网首页Swift UI
SwiftUI-创建TabView

SwiftUI-创建TabView

作者: 江湖闹士 | 来源:发表于2022-06-25 18:16 被阅读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)
            }
        }
    }
    

    相关文章

      网友评论

        本文标题:SwiftUI-创建TabView

        本文链接:https://www.haomeiwen.com/subject/bhnivrtx.html