iOS应用内弹窗通知怎么实现？其实很简单，这样，这样，再这样.....你学会了么？
项目背景
消息通知可以及时地将状态、内容的更新触达到用户，用户则可以根据收到的消息做后续判断。这是最常见的信息交换方式的产品设计。
而顶部向下弹出的消息通知本质上是根据条件触发的“中提醒”通知类型，示例：每次在网购时，支付成功后在App会展示消息通知。
因此本章中，我们就来试试使用SwiftUI来实现应用内弹窗通知交互。
项目搭建
首先，创建一个新的SwiftUI项目，命名为NotificationToast。
消息弹窗样式
我们构建一个新的视图NotificationToastView，然后声明好弹窗视图的内容变量，示例：
struct NotificationToastView: View { var notificationImage: String var notificationTitle: String var notificationContent: String var notificationTime: String var body: some View { //弹窗样式 } }
上述代码中，我们声明了4个String类型的变量：notificationImage图标信息、notificationTitle标题信息、notificationContent内容信息、notificationTime推送时间。
然后我们构建样式内容，示例：
HStack { Image(notificationImage) .resizable() .aspectRatio(contentMode: .fit) .frame(width: 60) .clipShape(Circle()) .overlay(Circle().stroke(Color(.systemGray5), lineWidth: 1)) VStack(spacing: 10) { HStack { Text(notificationTitle) .font(.system(size: 17)) .foregroundColor(.black) Spacer() Text(notificationTime) .font(.system(size: 14)) .foregroundColor(.gray) } Text(notificationContent) .font(.system(size: 14)) .foregroundColor(.black) .lineLimit(4) .multilineTextAlignment(.leading) } } .padding() .frame(minWidth: 10, maxWidth: .infinity, minHeight: 10, maxHeight: 80) .background(.white) .cornerRadius(8) .shadow(color: Color(.systemGray4), radius: 5, x: 1, y: 1) .padding() 上述代码中，我们构建了
样式排布，Image使用notificationImage图片信息变量，它和其他元素是HStack横向排布关系。
右边则是HStack横向排布的notificationTitle标题变量的文字和notificationTime推送时间的文字，使用Spacer撑开。
而底下是notificationContent内容信息，它和标题信息及推送时间信息是VStack纵向排布。
我们在ContentView中展示看看效果，示例：
NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流。", notificationTime: "2分钟前")
消息弹窗交互
交互方面，我么可以做个简单的交互，创建一个按钮，点击按钮时展示消息弹窗，消息弹窗显示时等待2秒后自动消失。
实现逻辑也很简单，我们可以让弹窗加载的时候在视图之外，然后点击按钮的时候，让消息弹窗从下往下弹出，然后等待2秒后再回到视图之外。
首先我们声明一个偏移量，定义消息弹窗的初始位置，示例：
@State var offset: CGFloat = -UIScreen.main.bounds.height / 2 - 80
然后给弹窗视图加上偏移量和动画的修饰符，示例：
ZStack { NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流", notificationTime: "2分钟前") .offset(x: 0, y: offset) .animation(.interpolatingSpring(stiffness: 120, damping: 10)) Button(action: { if offset <= 0 { offset += 180 DispatchQueue.main.asyncAfter(deadline: .now() + 2) { self.offset -= 180 } } }) { Text("弹出通知") } }
上述代码中，我们让NotificationToastView弹窗视图偏移位置Y轴为我们声明好的变量offset位置，然后使用ZStack叠加展示一个按钮，当我们offset在视图外时，点击按钮修改偏移量的位置为180，然后调用成功后等待2秒再扣减偏移量回到最初的位置。
项目预览
我们看看最终效果。
恭喜你，完成了本章的全部内容！
快来动手试试吧。
