持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情
本文使用常见的View和Modifiers进行布局，实现应用商城的界面。通过具体的案例实现，可以更好的熟悉SwiftUI的使用
效果：
简单介绍：
实现应用商城的游戏界面，分为三部分：标题栏、推荐游戏、周边游戏。 标题栏会显示标题、头像、更新数字 推荐游戏：标题、描述、游戏图片。可以左右滑动 周边游戏：标题、描述、多个游戏选项。可以上下滑动
分析如何实现：
整体布局：
- 界面可以实现导航效果，所以需要使用NavigationView
- 界面可以上下滑动，所以需要使用ScrollView
- 界面需要上下布局，所以使用VStack进行布局
- 三部分使用Divider()实现分割效果
标题栏：
- 头像是给Divider视图上方进行覆盖
- 更新数字覆盖在头像上方
推荐游戏：
- 左右滑动通过TabView实现。
- 每一个界面使用VStack来实现每行显示
- 游戏图片中通过overlay覆盖其他文字和图片
周边游戏：
- 标题和描述不需要滑动，因此直接进行设置
- 下方的多个游戏选项可以左右滑动，使用TabView
- 下方的多个游戏选项可以上下滑动，使用List实现
主要学习：
- 布局
- NavigationView
- Divider
- TabView
- List
- overlay
实现过程：
整体布局
NavigationView {
ScrollView {
VStack {
}
}
}.navigationTitle("游戏")
说明：
- NavigationView用来实现界面导航效果。使用navigationTitle实现游戏标题
- ScrollView可以让界面view上下滑动，就和OC中的UIScrollView一样
- 在界面中使用VStack实现垂直布局。
标题栏
Divider().padding(EdgeInsets.init(top: 20, leading: 20, bottom: 0, trailing: 20))
.overlay {
AsyncImage(url: URL.init(string: img2), content: { img in
img.resizable()
}, placeholder: {
ProgressView()
}).frame(width: 50, height: 50).cornerRadius(25)
.overlay {
Text("83").frame(width: 32, height: 20).background(.red).cornerRadius(10).foregroundColor(.white).padding(EdgeInsets.init(top: -30, leading: 30, bottom: 0, trailing: 0))
}.padding(EdgeInsets.init(top: -64, leading: 300, bottom: 0, trailing: 0))
}
说明：
- Divider()是一个分割线视图
- 使用padding来填充空白到视图的周围，使用你指定的边和填充量来进行设置，这里使用了EdgeInsets来设置上下左右的填充量。
- 在一个视图上面想要覆盖一个视图，就需要使用overlay来实现。这里给Divider来覆盖一个头像视图
- AsyncImage用来异步加载图片，因为有可能没有加载成功，所以使用placeholder设置加载失败后的占位（可以设置图片、可以设置文字、也可以像这里设置加载视图）
- 给头像覆盖一个视图，设置一个文字，使用
Text("83")进行设置 - Text的设置很简单，就不详细说明了。
推荐游戏
说明：
- TabView可以看做OC中的tabbar，可以实现左右滑动（不要误以为是UITableView）
- ForEach设置多行，以此实现左右滑动
- 为了纵向可以给Text设置特定位置，使用HStack
- Spacer()用来设置空视图
- cornerRadius用来设置边框圆角角度
- 在这里为了方便调整视图位置，都使用到了Spacer()。并且因为它本身也是一个视图，所以需要放到Stack中
- 此处按钮的响应事件只进行了打印。在实际开发中这里应该是要跳转界面
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))设置TabView的类型，这里是设置了分页查看，设置成这种类型就可以左右滑动查看。而且还设置了不显示小点点
周边游戏：
代码：
说明：
- 这里其实分成了两部分，第一部分是标题描述，第二部分是游戏显示
- 第一部分很简单，只使用到了Stack、Text、Button。上面已经讲过这些视图的使用了
- 依然使用TabView实现左右滑动
- List可以实现列表显示，
.listStyle(InsetListStyle())设置list的类型 - 每个列表都显示各自的游戏图片和说明
