SwiftUI（二十二）- 使用SwiftUI搭建一个宝箱弹窗卡片

引言

在现代直播间中，宝箱互动已成为提升观众参与感和活跃度的关键工具之一。通过宝箱弹窗卡片，主播可以设置特定的任务或倒计时活动，吸引观众完成操作并领取奖励。这种设计不仅增加了直播间的趣味性，还能有效促进用户的停留和互动。

本文将以 SwiftUI 为基础，教你如何快速搭建一个宝箱弹窗卡片 UI，从背景到交互按钮，全面还原直播间的宝箱场景。无论你是初学者还是希望优化现有项目的开发者，都可以通过本文获取实用的实现技巧！

功能与设计分析

整个宝箱弹窗卡片我们可以分割成多个部分：

1. 内容背景部分：主要是取消按钮以上的部分为一个带圆角的大长方形背景。
2. 顶部发送人信息：位于内容卡片的最顶部，包含了发送人的图像昵称，以及当前用户是否已关注了发送人。
3. 中间宝箱内容：包含了一个宝箱的图片，以及宝箱的介绍文案，另外还有一个操作按钮，操作按钮会进行倒计时又不可点击状态转变为可点击状态。
4. 取消按钮：最底部则是一个带“Not now”字样的关闭弹窗按钮。

实现步骤