SwiftUI教程系列文章汇总

本文使用常见的View和Modifiers进行布局，实现应用商城的界面。通过具体的案例实现，可以更好的熟悉SwiftUI的使用

效果：

效果示意

简单介绍：

实现应用商城的游戏界面，分为三部分：标题栏、推荐游戏、周边游戏。
标题栏会显示标题、头像、更新数字
推荐游戏：标题、描述、游戏图片。可以左右滑动
周边游戏：标题、描述、多个游戏选项。可以上下滑动

分析如何实现：

整体布局：

1. 界面可以实现导航效果，所以需要使用NavigationView
2. 界面可以上下滑动，所以需要使用ScrollView
3. 界面需要上下布局，所以使用VStack进行布局
4. 三部分使用Divider()实现分割效果

标题栏：

1. 头像是给Divider视图上方进行覆盖
2. 更新数字覆盖在头像上方

推荐游戏：

1. 左右滑动通过TabView实现。
2. 每一个界面使用VStack来实现每行显示
3. 游戏图片中通过overlay覆盖其他文字和图片

周边游戏：

1. 标题和描述不需要滑动，因此直接进行设置
2. 下方的多个游戏选项可以左右滑动，使用TabView
3. 下方的多个游戏选项可以上下滑动，使用List实现

主要学习：

1. 布局
2. NavigationView
3. Divider
4. TabView
5. List
6. overlay

实现过程：

整体布局

NavigationView {
    ScrollView {
        VStack {
        }
    }
}.navigationTitle("游戏")

说明：

1. NavigationView用来实现界面导航效果。使用navigationTitle实现游戏标题
2. ScrollView可以让界面view上下滑动，就和OC中的UIScrollView一样
3. 在界面中使用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))
}

说明：

1. Divider()是一个分割线视图
2. 使用padding来填充空白到视图的周围，使用你指定的边和填充量来进行设置，这里使用了EdgeInsets来设置上下左右的填充量。
3. 在一个视图上面想要覆盖一个视图，就需要使用overlay来实现。这里给Divider来覆盖一个头像视图
4. AsyncImage用来异步加载图片，因为有可能没有加载成功，所以使用placeholder设置加载失败后的占位（可以设置图片、可以设置文字、也可以像这里设置加载视图）
5. 给头像覆盖一个视图，设置一个文字，使用Text("83")进行设置
6. 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))

说明：

1. TabView可以看做OC中的tabbar，可以实现左右滑动（不要误以为是UITableView）
2. ForEach设置多行，以此实现左右滑动
3. 为了纵向可以给Text设置特定位置，使用HStack
4. Spacer()用来设置空视图
5. cornerRadius用来设置边框圆角角度
6. 在这里为了方便调整视图位置，都使用到了Spacer()。并且因为它本身也是一个视图，所以需要放到Stack中
7. 此处按钮的响应事件只进行了打印。在实际开发中这里应该是要跳转界面
8. .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))

说明：

1. 这里其实分成了两部分，第一部分是标题描述，第二部分是游戏显示
2. 第一部分很简单，只使用到了Stack、Text、Button。上面已经讲过这些视图的使用了
3. 依然使用TabView实现左右滑动
4. List可以实现列表显示，.listStyle(InsetListStyle())设置list的类型
5. 每个列表都显示各自的游戏图片和说明