携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情。
项目背景
稀土掘金App一直以来都缺少在客户端 发布文章的功能，可能原因如下：
一是由于基础功能（示例：会员、活动等）还在完善，优先级较高；
二是由于在移动端实现发布文章功能的开发难度较大、开发周期较长；
三是产品规划中稀土掘金App的发展方向有所侧重，新增的每一项功能都需要经过内部评审层层管控。
如果稀土掘金App要更新发布文章功能，鉴于当前的App设计风格和产品结构，入口放在哪里会比较合适呢？
传统的资讯社区类App，新增发布内容的入口通过可以分为3大类：顶部导航入口、主页面悬浮入口、底部导航入口。
那么本章中，我们就来使用SwiftUI实现下几个入口的设计吧～
项目搭建
首先，创建一个新的SwiftUI项目，命名为WritingView。
顶部导航入口
顶部导航入口在头条系的产品中较为常见，示例：今日头条。
这种产品设计方式偏向于让App以内容资讯查阅为重点规划方向，在本身资讯内容较为完善的情况下，强化资讯资讯流，而弱化对于内容共建的产品侧重。
让用户偏向于浏览资讯，而把提供资讯内容的创作者作为有主动意识形态的群体，因此在产品设计上，发布文章功能放置在首页右上角。
功能实现上，我们可以使用NavigationView导航来实现这个功能样式，示例：
struct ContentView: View {
var body: some View {
NavigationView {
Text("点击右上角发布文章")
.padding()
.navigationBarTitle("首页", displayMode: .inline)
.navigationBarItems(trailing: publishBtnView)
}
}
// 顶部导航入口
private var publishBtnView: some View {
Button(action: {
}) {
Image(systemName: "plus.circle.fill")
.foregroundColor(.blue)
}
}
}
上述代码中，我们绘制了一个发布按钮publishBtnView，然后使用navigationBarTitle修饰符设置首页的标题，最后将创建好的publishBtnView视图使用navigationBarItems修饰符放在页面右上角。
主页悬浮入口
主页悬浮入口是一种悬浮在页面右下角，在底部导航之上的一种入口设置方式。
常见于社区、圈子、问答、购物类App中，主要用于快速编辑分享基于当前页面内容的信息，示例：稀土掘金“沸点”功能。
偏向于引导用户就话题或者内容分享个人见解，构建社区氛围。
功能实现上，我们可以使用ZStack层叠视图，将按钮位置放在页面右下角，示例：
// 悬浮入口
private var suspendBtnView: some View {
VStack {
Spacer()
HStack {
Spacer()
Button(action: {
}) {
Image(systemName: "plus.circle.fill")
.font(.system(size: 60))
.foregroundColor(.blue)
}
}
}
.padding(.bottom, 32)
.padding(.trailing, 32)
}
上述代码中，我们创建了一个按钮视图suspendBtnView，使用VStack纵向视图和HStack横向视图，将按钮放置在了右下角。
最后我们还需要使用ZStack层叠视图，将suspendBtnView视图和主页层叠在一起，示例：
var body: some View {
NavigationView {
ZStack {
Text("点击右下角发布文章")
.padding()
suspendBtnView
}
.navigationBarTitle("首页", displayMode: .inline)
}
}
底部导航入口
最后一种方式是底部导航入口的方式，常规的底部菜单最多不超过5个入口，排除通用的“首页”和“我的”入口，系统掘金App还有“沸点”、“发现”、“课程”栏目。
当前“首页”承载着推荐文章信息流，发布文章功能当前最有可能安置在主页右上角，其次安排到主页右下角悬浮窗口。
但对于其他功能页面，“发现”页面承载的内容过多，则多于其他栏目内容重复，如果在“发现”页面，技术团队推荐、活动推荐等功能与其他栏目相融合，那么可以将“发布文章”操作替代原有的“发现”入口。
当然，这只是个人浅显的建议。
回归主题，在底部导航我们也可以创建“发布文章”的按钮，示例：
// 底部导航入口
struct TabberView: View {
@Binding var selectedIndex: Int
var body: some View {
HStack {
// 首页
Button(action: {
self.selectedIndex = 0
}) {
VStack(spacing: 10) {
Image(systemName: "house.fill")
.font(.system(size: 24))
Text("首页")
.font(.system(size: 14))
}
}.foregroundColor((self.selectedIndex == 0) ? .blue : .gray)
Spacer(minLength: 0)
// 沸点
Button(action: {
self.selectedIndex = 1
}) {
VStack(spacing: 10) {
Image(systemName: "flame.fill")
.font(.system(size: 24))
Text("沸点")
.font(.system(size: 14))
}
}.foregroundColor((self.selectedIndex == 1) ? .blue : .gray)
Spacer(minLength: 0)
// 发布文章
Button(action: {
self.selectedIndex = 2
}) {
Image(systemName: "plus.circle.fill")
.font(.system(size: 48))
}.foregroundColor(.blue)
Spacer(minLength: 0)
// 课程
Button(action: {
self.selectedIndex = 3
}) {
VStack(spacing: 10) {
Image(systemName: "book.closed.fill")
.font(.system(size: 24))
Text("课程")
.font(.system(size: 14))
}
}.foregroundColor((self.selectedIndex == 3) ? .blue : .gray)
Spacer(minLength: 0)
// 我的
Button(action: {
self.selectedIndex = 4
}) {
VStack(spacing: 10) {
Image(systemName: "person.fill")
.font(.system(size: 24))
Text("我的")
.font(.system(size: 14))
}
}.foregroundColor((self.selectedIndex == 4) ? .blue : .gray)
}.padding(.horizontal, 35)
}
}
上述代码中，我们创建了一个新视图TabberView，然后声明了一个变量selectedIndex，用来判断当前点击的是哪一个栏目。
样式部分，我们创建了5个按钮，设置了按钮的颜色和尺寸，除了“发布文章”按钮外，其他按钮都跟随selectedIndex变量切换颜色，用于辨别点击的是哪一个按钮。
然后我们在ContentView上也需要使用@State声明selectedIndex变量，做双向绑定。示例：
@State var selectedIndex: Int = 0
最后在ContentView视图上构建样式，示例：
VStack {
Spacer()
TabberView(selectedIndex: $selectedIndex)
}
小结
如果稀土掘金App要更新发布文章功能，入口无非就是以上3种其中一种。当然要实现在客户端写文章并且发布，功能、交互、逻辑没有那么简单，在此只是因为看到群里聊天话题就顺手写了篇文章，也算是一种总结和学习。
至于最终使用哪一种方式，好与不好，也欢迎大家留下宝贵的建议～
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
