携手创作，一起生长！这是我参加「日新方案 · 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种其中一种。当然要完成在客户端写文章而且发布，功用、交互、逻辑没有那么简单，在此仅仅因为看到群里谈天论题就顺手写了篇文章，也算是一种总结和学习。
至于最终运用哪一种方法，好与不好，也欢迎大家留下宝贵的建议～
快来动手试试吧。
假如本专栏对你有帮助，无妨点赞、评论、关注～
