携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情。
项目背景
在之前的章节中，我们探讨过如果掘金客户端要做发布文章功能，那么入口应该放在那个地方。
当我们确定了入口后，目前掘金Web端支持发布文章和沸点，移动端估计也会同步融合这两块功能作为一个入口。
我们再深化一下，当我们点击“发布”功能入口时，客户端该如何进行交互？那么本章中，我们就来完成这个交互页面。
项目搭建
首先，创建一个新的SwiftUI项目，命名为PublishingView。
顶部导航
我们暂定“发布”功能的入口在顶部导航右边，也就是页面右上角。我们基于当前掘金客户端的布局，来构建下整个顶部导航，设计稿示例：
我们来分析下结构，顶部导航由一个“直播”按钮入口，一个“搜索栏”，以及一个“发布”功能按钮组成。
对于“搜索栏”的构建，我们需要声明一个变量来绑定和存储输入的内容；以及当我们点击“发布”按钮时会打开一个弹窗页面，我们也需要一个变量来存储打开的状态，示例：
@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()
}
}
复制代码背景蒙层
当我们点击“发布“按钮打开弹窗时，除了弹窗本身外，弹窗背后还有一个背景蒙层，我们可以单独构建这个背景蒙层。示例：
// 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背景蒙层，点击运行预览下项目：
未完待续
由于弹窗的样式和交互逻辑较为复杂，这里将项目分为上下两章来实现。上篇我们完成顶部导航和背景蒙层的设计，下篇我们来实现下弹窗的弹出、收起、拖动等功能交互。
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～