SwiftUI 新建发布弹窗（下）：弹窗搭建和基础交互

在上一篇文章中，我们创建了新建发布入口和背景蒙层。现在，让我们进入激动人心的部分：搭建弹窗并添加基本交互。

弹窗搭建

第一步是创建一个 ZStack 作为弹窗的容器，如下所示：

struct NewPostModal: View {
  var body: some View {
    ZStack {
      // 内容在此处
    }
  }
}

在 ZStack 内，我们将放置一个 VStack，作为弹窗的内容：

VStack {
  // 标题
  // 输入框
  // 按钮
}
.frame(width: 300, height: 400)
.background(Color.white)
.cornerRadius(10)

• 将 ZStack 设置为 NewPostModal 视图的 body。
• 设置 VStack 的 frame 来定义弹窗的大小。
• 设置 VStack 的 background 为白色，并添加圆角以实现美观。

标题

在标题中，我们将显示一个简单的文本：“新建发布”：

Text("新建发布")
.font(.title)
.padding()

• 设置 Text 的 font 为标题。
• 为 Text 添加一些填充以增加间距。

输入框

我们还需要一个文本编辑器来允许用户输入发布内容：

TextEditor(text: $content)
.frame(height: 200)

• 使用 TextEditor 来创建文本编辑器。
• 将文本编辑器的 text 绑定到 content 状态变量。
• 设置文本编辑器的 frame 以调整其高度。

按钮

最后，我们需要两个按钮：一个用于关闭弹窗，另一个用于发布内容：

HStack {
  Button(action: close) {
    Text("关闭")
  }
  Button(action: publish) {
    Text("发布")
  }
}
.padding()

• 使用 HStack 来水平排列按钮。
• 使用 Button 来创建按钮。
• 将 close 动作绑定到关闭按钮。
• 将 publish 动作绑定到发布按钮。
• 为按钮添加一些填充以增加间距。

交互

现在，让我们添加一些基本交互：

• 关闭弹窗： 当用户点击关闭按钮或向下拖动弹窗时，关闭弹窗。
• 向下拖动关闭弹窗： 当用户向下拖动弹窗并超过一定距离时，关闭弹窗。

封装