Trabalhar juntos para criar e crescer juntos! Este é o 29º dia da minha participação no "Nuggets Daily New Plan · August Update Challenge", clique para ver os detalhes do evento .
Antecedentes do projeto
A notificação de mensagem pode chegar oportunamente ao usuário com atualizações de status e conteúdo, e o usuário pode fazer julgamentos de acompanhamento com base na mensagem recebida. Esta é a forma mais comum de troca de informações no design de produtos.
A notificação de mensagem que aparece de cima para baixo é essencialmente um tipo de notificação de " lembrete médioApp " que é acionado de acordo com as condições, por exemplo: toda vez que você compra online, uma notificação de mensagem será exibida após o pagamento ser bem-sucedido .
Portanto, neste capítulo, tentaremos usá SwiftUI-lo para implementar a interação de notificação pop-up no aplicativo.
Construção do projeto
Primeiro, crie um novo SwiftUIprojeto chamado NotificationToast.
estilo pop-up de mensagem
Construímos uma nova view NotificationToastViewe, em seguida, declaramos a variável content da view pop-up, por exemplo:
struct NotificationToastView: View {
var notificationImage: String
var notificationTitle: String
var notificationContent: String
var notificationTime: String
var body: some View {
//弹窗样式
}
}
复制代码No código acima, declaramos 4 Stringtipos de variáveis: informações de notificationImageícone, informações de notificationTitletítulo, informações de notificationContentconteúdo e notificationTimetempo de envio.
Em seguida, construímos o conteúdo do estilo, exemplo:
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()
复制代码No código acima, construímos o layout de estilo, Imageusando a notificationImagevariável de informações da imagem, que está em uma HStackrelação de layout horizontal com outros elementos.
À direita está o texto da variável de título HStackorganizada horizontalmente notificationTitlee o texto do notificationTimetempo de envio, que estão espalhados Spacer.
Na parte inferior estão as informações de conteúdo, que são organizadas verticalmente notificationContentcom as informações do título e as informações de tempo de envio .VStack
Mostramos ContentViewo efeito no exemplo:
NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流。", notificationTime: "2分钟前")
复制代码Interação pop-up de mensagem
Em termos de interação, podemos fazer uma interação simples, criar um botão, exibir uma janela pop-up de mensagem quando o botão for clicado e aguardar 2 segundos para desaparecer automaticamente após a exibição da janela pop-up de mensagem.
A lógica de implementação também é muito simples. Podemos fazer com que a janela pop-up seja carregada fora da visualização e, quando o botão for clicado, deixar a janela pop-up de mensagem aparecer de baixo para baixo e aguardar 2 segundos antes de retornar à visualização .
Primeiro, declaramos um deslocamento para definir a posição inicial da mensagem pop-up. Exemplo:
@State var offset: CGFloat = -UIScreen.main.bounds.height / 2 - 80
复制代码Em seguida, adicione modificadores à visualização pop-up, por 偏移量exemplo :动画
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("弹出通知")
}
}
复制代码No código acima, deixamos NotificationToastViewa posição Y轴de deslocamento da exibição pop-up ser a posição da variável que declaramos offsete, em seguida, usamos a ZStacksobreposição para exibir um botão. Quando estivermos offsetfora da exibição, clique no botão para modificar a posição do deslocamento 180e 等待2秒em seguida, deduza após a chamada ser bem-sucedida. Subtraia o deslocamento de volta 最初的位置.
Visualização do projeto
Vamos ver o efeito final.
Parabéns, você concluiu todo o conteúdo deste capítulo!
Venha e experimente.
Se esta coluna for útil para você, por favor, curta, comente e siga~