携手创作，共同生长！这是我参与「日新方案 8 月更文应战」的第23天，点击查看活动概况。

项目布景

在之前的章节中，咱们讨论过如果客户端要做发布文章功用，那么进口应该放在那个地方。

当咱们确定了进口后，现在Web端支持发布文章和沸点，移动端估量也会同步交融这两块功用作为一个进口。

咱们再深化一下，当咱们点击“发布”功用进口时，客户端该怎么进行交互？那么本章中，咱们就来完结这个交互页面。

项目建立

首先，创立一个新的SwiftUI项目，命名为PublishingView。

发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（上）

顶部导航

咱们暂定“发布”功用的进口在顶部导航右边，也就是页面右上角。咱们基于当前客户端的布局，来构建下整个顶部导航，规划稿示例：

发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（上）

咱们来剖析下结构，顶部导航由一个“直播”按钮进口，一个“查找栏”，以及一个“发布”功用按钮组成。

关于“查找栏”的构建，咱们需求声明一个变量来绑定和存储输入的内容；以及当咱们点击“发布”按钮时会打开一个弹窗页面，咱们也需求一个变量来存储打开的状况，示例：

@State var searchText = “"
@State var showMaskView: Bool = false

然后咱们来完结整个顶部导航的样式，示例：

// 查找栏
func topBarMenu() -> some View {
HStack(spacing: 15) {
// 直播
Button(action: {
}) {
Image(systemName: "video.square")
.font(.system(size: 24))
.foregroundColor(.gray)
}
TextField("查找文如秋雨", text: $searchText)
.padding(7)
.padding(.horizontal, 25)
.background(Color(.systemGray6))
.cornerRadius(8)
.overlay(
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).padding(.leading, 8)
)
// 新建发布
Button(action: {
withAnimation {
       self.showMaskView = true
}
}) {
Image(systemName: "plus.circle.fill")
.font(.system(size: 24))
.foregroundColor(.blue)
}
}.padding(.horizontal, 15)
}

上述代码中，咱们构建了一个新的视图topBarMenu。

咱们运用VStack纵向视图排布了一个“直播”Button按钮，一个查找栏TextField输入框，一个“发布”Button按钮。查找栏TextField输入框的内容绑定咱们声明好的变量searchText，“发布”Button按钮点击时，切换showMaskView状况打开弹窗。

然后咱们在ContentView主视图中构建样式，示例：

var body: some View {
 VStack {
  topBarMenu()
  Spacer()
 }
}

发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（上）

布景蒙层

当咱们点击“发布“按钮打开弹窗时，除了弹窗本身外，弹窗背面还有一个布景蒙层，咱们能够单独构建这个布景蒙层。示例：

// MARK: 蒙层
struct MaskView: View {
@Binding var showMaskView: Bool
var body: some View {
VStack {
Spacer()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(.black)
.edgesIgnoringSafeArea(.all)
.opacity(0.2)
.onTapGesture {
self.showMaskView = false
}
}
}

上述代码中，咱们运用结构体的方法抽离出布景蒙层MaskView。

在MaskView结构体中，咱们运用@Binding方便咱们做双向绑定，然后运用edgesIgnoringSafeArea修饰符构建一个满屏的页面，这个页面布景颜色透明度为0.2的黑色，这样咱们就完结了布景蒙层的规划。

交互方面，当咱们点击布景蒙层时，切换showMaskView状况，以完成封闭弹窗。

咱们在ContentView主视图运用MaskView布景蒙层看看作用，示例：

var body: some View {
ZStack {
VStack {
topBarMenu()
Spacer()
}
if showMaskView {
MaskView(showMaskView: $showMaskView)
}
}
}

上述代码中，咱们通过判别showMaskView状况的值，来完成显示MaskView布景蒙层，点击运行预览下项目：

发布&选择发布，使用SwiftUI搭建一个新建发布弹窗（上）

未完待续

由于弹窗的样式和交互逻辑较为复杂，这儿将项目分为上下两章来完成。上篇咱们完结顶部导航和布景蒙层的规划，下篇咱们来完成下弹窗的弹出、收起、拖动等功用交互。

快来着手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～