携手创造，一同生长！这是我参加「日新计划 8 月更文应战」的第29天，点击检查活动详情。
项目布景
音讯告诉可以及时地将状况、内容的更新触到达用户，用户则可以依据收到的音讯做后续判断。这是最常见的信息交换方法的产品设计。
而顶部向下弹出的音讯告诉本质上是依据条件触发的“中提示”告诉类型，示例：每次在网购时，付出成功后在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秒再扣减偏移量回到开始的方位。
项目预览
咱们看看最终作用。
祝贺你，完成了本章的全部内容！
快来着手试试吧。
假如本专栏对你有帮助，不妨点赞、谈论、关注～
