¡Trabajar juntos para crear y crecer juntos! Este es el día 29 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de agosto", haga clic para ver los detalles del evento .
Antecedentes del proyecto
La notificación del mensaje puede llegar oportunamente al usuario con actualizaciones de estado y contenido, y el usuario puede hacer juicios de seguimiento basados en el mensaje recibido. Esta es la forma más común de intercambiar información en el diseño de productos.
La notificación de mensaje que aparece de arriba hacia abajo es esencialmente un tipo de notificación de " recordatorio medioApp " que se activa según las condiciones, por ejemplo: cada vez que compre en línea, se mostrará una notificación de mensaje después de que el pago sea exitoso .
Por lo tanto, en este capítulo, intentaremos usarlo SwiftUIpara implementar la interacción de notificaciones emergentes en la aplicación.
Proyecto de construcción
Primero, crea un nuevo SwiftUIproyecto llamado NotificationToast.
estilo de mensaje emergente
Creamos una nueva vista NotificationToastViewy luego declaramos la variable de contenido de la vista emergente, por ejemplo:
struct NotificationToastView: View {
var notificationImage: String
var notificationTitle: String
var notificationContent: String
var notificationTime: String
var body: some View {
//弹窗样式
}
}
复制代码En el código anterior, declaramos 4 Stringtipos de variables: información de notificationImageicono, información de notificationTitletítulo, información de notificationContentcontenido y notificationTimetiempo de inserción.
Luego construimos el contenido de estilo, ejemplo:
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()
复制代码En el código anterior, hemos construido el diseño de estilo Imageutilizando la notificationImagevariable de información de la imagen, que está en una HStackrelación de diseño horizontal con otros elementos.
A la derecha está el texto de la variable de título HStackdispuesta horizontalmente notificationTitley el texto del notificationTimetiempo de inserción, que están dispersos Spacer.
En la parte inferior está la información del contenido, que se organiza verticalmente notificationContentcon la información del título y la información del tiempo de inserción .VStack
Mostramos ContentViewel efecto en el ejemplo:
NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流。", notificationTime: "2分钟前")
复制代码Interacción de mensajes emergentes
En términos de interacción, podemos hacer una interacción simple, crear un botón, mostrar una ventana emergente de mensaje cuando se hace clic en el botón y esperar 2 segundos para que desaparezca automáticamente después de que se muestre la ventana emergente de mensaje.
La lógica de implementación también es muy simple. Podemos hacer que la ventana emergente se cargue fuera de la vista, y luego, cuando se hace clic en el botón, dejar que la ventana emergente del mensaje aparezca de abajo hacia abajo , y luego esperar 2 segundos antes de volver a la vista .
Primero, declaramos un desplazamiento para definir la posición inicial del mensaje emergente. Ejemplo:
@State var offset: CGFloat = -UIScreen.main.bounds.height / 2 - 80
复制代码Luego agregue modificadores a la vista emergente, por 偏移量ejemplo :动画
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("弹出通知")
}
}
复制代码En el código anterior, dejamos que NotificationToastViewla posición de desplazamiento Y轴de la vista emergente sea la posición variable que declaramos offset, y luego usamos la ZStacksuperposición para mostrar un botón. Cuando estemos offsetfuera de la vista, haga clic en el botón para modificar la posición del desplazamiento 180, y 等待2秒luego deducir después de que la llamada sea exitosa.Restar la compensación de nuevo 最初的位置.
Vista previa del proyecto
Veamos el efecto final.
¡Felicitaciones, ha completado todo el contenido de este capítulo!
Ven y pruébalo.
Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~