本文使用常见的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 {
ForEach($items, id: \.self) {_ in
VStack {
HStack {
Text("重磅更新").foregroundColor(.blue).fontWeight(.bold)
Spacer()
}
HStack {
Text("地下城堡3：魂之诗").font(.title)
Spacer()
}
HStack {
Text("新地图“废械阵”上线").font(.title2).foregroundColor(.gray)
Spacer()
}
AsyncImage(url: URL.init(string: img1)) { img in
img.resizable()
} placeholder: {
ProgressView()
}
.frame(height: 220)
.cornerRadius(10)
.overlay {
VStack {
Spacer()
HStack {
AsyncImage(url: URL.init(string: img2)) { img in
img.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 50, height: 50).cornerRadius(12)
VStack {
HStack {
Text("地下城堡3：魂之诗").foregroundColor(.white).font(.title3)
Spacer()
}
HStack {
Text("暗黑文字地牢探险").foregroundColor(.gray)
Spacer()
}
}
Spacer()
VStack {
Button("获取") {
print("get")
}.foregroundColor(.white).font(Font.system(.title2).bold()).frame(width: 94, height: 40).background(.gray.opacity(0.8)).cornerRadius(20)
Text("App内购买").foregroundColor(.gray).font(.footnote)
}.padding(.top, 15)
}
.padding(EdgeInsets.init(top: 0, leading: 16, bottom: 6, trailing: 16))
.background(LinearGradient(colors: [.black.opacity(0.5), .clear], startPoint: .bottom, endPoint: .top)).cornerRadius(12)
}
}
}.padding(20)
}
}
.frame(width: ScreenWidth, height: 320)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
说明：
- TabView可以看做OC中的tabbar，可以实现左右滑动（不要误以为是UITableView）
- ForEach设置多行，以此实现左右滑动
- 为了纵向可以给Text设置特定位置，使用HStack
- Spacer()用来设置空视图
- cornerRadius用来设置边框圆角角度
- 在这里为了方便调整视图位置，都使用到了Spacer()。并且因为它本身也是一个视图，所以需要放到Stack中
- 此处按钮的响应事件只进行了打印。在实际开发中这里应该是要跳转界面
-
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))设置TabView的类型，这里是设置了分页查看，设置成这种类型就可以左右滑动查看。而且还设置了不显示小点点
周边游戏：
代码：
VStack {
HStack {
Text("我们都在玩").font(.title).bold()
Spacer()
Button("查看全部") {
print("all")
}.font(.title2)
}
HStack {
Text("探索本周游戏热点").foregroundColor(.gray).font(.title2)
Spacer()
}
}.padding(EdgeInsets.init(top: 0, leading: 20, bottom: 0, trailing: 20))
TabView {
ForEach($items, id: \.self) {_ in
List(0..<3) {_ in
HStack {
AsyncImage(url: URL.init(string: img1)) { img in
img.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 68, height: 68).cornerRadius(16)
VStack {
HStack {
Text("地下城堡3：魂之诗").font(.title3)
Spacer()
}
HStack {
Text("暗黑文字地牢探险").foregroundColor(.gray)
Spacer()
}
}
Spacer()
VStack {
Button("获取") {
print("get")
}.foregroundColor(.blue).font(Font.system(.title2).bold()).frame(width: 94, height: 40).background(.gray.opacity(0.2)).cornerRadius(20)
Text("App内购买").foregroundColor(.gray).font(.footnote)
}
}
}.listStyle(InsetListStyle())//.listRowSeparator(.hidden)
}
}
.frame(width: ScreenWidth, height: 270)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
说明：
- 这里其实分成了两部分，第一部分是标题描述，第二部分是游戏显示
- 第一部分很简单，只使用到了Stack、Text、Button。上面已经讲过这些视图的使用了
- 依然使用TabView实现左右滑动
- List可以实现列表显示，
.listStyle(InsetListStyle())设置list的类型 - 每个列表都显示各自的游戏图片和说明
