0
点赞
收藏
分享

微信扫一扫

发布&选择发布,使用SwiftUI搭建一个新建发布弹窗(上)

项目背景

在之前的章节中,我们探讨过如果客户端要做发布文章功能,那么入口应该放在那个地方。

当我们确定了入口后,目前​​Web端​​​支持发布​​文章​​​和​​沸点​​,移动端估计也会同步融合这两块功能作为一个入口。

我们再深化一下,当我们点击“​​发布​​”功能入口时,客户端该如何进行交互?那么本章中,我们就来完成这个交互页面。

项目搭建

首先,创建一个新的​​SwiftUI​​​项目,命名为​​PublishingView​​。

发布&选择发布,使用SwiftUI搭建一个新建发布弹窗(上)_输入框

顶部导航

我们暂定“发布”功能的入口在顶部导航右边,也就是页面右上角。我们基于当前客户端的布局,来构建下整个顶部导航,设计稿示例:

发布&选择发布,使用SwiftUI搭建一个新建发布弹窗(上)_SwiftUI_02

我们来分析下结构,顶部导航由一个“直播”按钮入口,一个“搜索栏”,以及一个“发布”功能按钮组成。

对于“搜索栏”的构建,我们需要声明一个​​变量​​来绑定和存储输入的内容;以及当我们点击“发布”按钮时会打开一个弹窗页面,我们也需要一个​​变量​​来存储打开的状态,示例:

@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搭建一个新建发布弹窗(上)_客户端_03

背景蒙层

当我们点击“​​发布​​“按钮打开弹窗时,除了弹窗本身外,弹窗背后还有一个背景蒙层,我们可以单独构建这个背景蒙层。示例:

// 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

上述代码中,我们使用结构体的方式抽离出背景蒙层​​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搭建一个新建发布弹窗(上)_SwiftUI_04

未完待续

由于弹窗的样式和交互逻辑较为复杂,这里将项目分为上下两章来实现。上篇我们完成顶部导航和背景蒙层的设计,下篇我们来实现下弹窗的弹出、收起、拖动等功能交互。

快来动手试试吧。

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

举报

相关推荐

0 条评论