SwiftUI实战之仿微信TabView新消息提醒

本文价值与收获

看完本文后，您将能够作出下面的界面

Jietu20200305-125402.gif

看完本文您将掌握的技能

• 创建消息提醒
• 支持增加与清除提醒

解决方案

本文我们将学习如何在SwiftUI的标签栏项上显示徽章编号。徽章在引起用户注意方面起着不可或缺的作用，许多场景都需要使用到数字提示。例如，当新消息到达消息传递应用程序时，微信会在tab上提示我们有新消息。

1、我们先创建主界面

struct BadgeView: View {
    @Binding var  badgeNumber: Int
    var body: some View {
        NavigationView{
            VStack{
                Spacer()
                Button("增加新消息"){
                    self.badgeNumber += 1
                }
                .foregroundColor(.white)
                .padding()
                .background(Color.orange)
                .cornerRadius(8)
                .padding()
                
                Button(" 全部已读 "){
                    self.badgeNumber = 0
                }
                .foregroundColor(.white)
                .padding()
                .background(Color.orange)
                .cornerRadius(8)
                
                Spacer()
                
            }
            .background(
                Image("3yue")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            )
                .navigationBarTitle(Text("仿微信TabView新消息提醒"),displayMode: .inline)
        }
    }
}

2、 设置tabbar

TabView {
                    BadgeView(badgeNumber: self.$badgeNumber)
                        .tabItem {
                            Image(systemName: "1.circle")
                            Text("First")
                    }.tag(0)
                    
                    Text("Second View")
                        .tabItem {
                            Image(systemName: "2.circle")
                            Text("Second")
                    }.tag(1)
                    
                    Text("Third View")
                        .tabItem {
                            Image(systemName: "3.circle")
                            Text("Third")
                    }.tag(2)
                }

3、GeometryReader和ZStack将徽标放置在“标签栏”项上
我们将使用GeometryReader和ZStack将徽标放置在“标签栏”项上。GeometryReader是我们的主要容器，然后我们将TabView嵌入ZStack中，并具有底部前导对齐。