如果稀土掘金App要更新“发布文章”功能，那么入口会设置在哪里？
项目背景
稀土掘金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种其中一种。当然要实现在客户端写文章并且发布，功能、交互、逻辑没有那么简单，在此只是因为看到群里聊天话题就顺手写了篇文章，也算是一种总结和学习。
至于最终使用哪一种方式，好与不好，也欢迎大家留下宝贵的建议～
快来动手试试吧。
