一緒に創造し、成長するために一緒に働きましょう！「ナゲッツデイリー新プラン・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 {
//弹窗样式
}
}
复制代码上記のコードでは、アイコン情報、タイトル情報、コンテンツ情報、プッシュ時間の 4String種類の変数を宣言しています。notificationImagenotificationTitlenotificationContentnotificationTime
次に、スタイル コンテンツを作成します。例:
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を使用してスタイル レイアウトを構築しました。これは、他の要素と水平方向のレイアウト関係にあります。notificationImageHStack
右側には、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秒次に、呼び出しが成功した後に差し引きます。オフセット back を差し引きます最初的位置。
プロジェクトのプレビュー
最終的な効果を見てみましょう。
おめでとうございます。この章の内容をすべて完了しました。
是非、試してみてください。
このコラムが役に立ったら、いいね、コメント、フォローをお願いします〜