使用SwiftUI开发一个APP - 轮播图、底部导航、类目页

0. swift package manager 加载慢

首先在命令行执行设置代理命令

export ALL_PROXY=http://127.0.0.1:8001</pre>

再通过命令行打开xcode

open -a Xcode.app

1. 轮播图

直接找了一个开源的包来使用，上面的记录也是在集成包的过程中遇到的问题的解决方案。我这里引入的包的github地址是:https://github.com/JWAutumn/ACarousel/

三方的包引入之后，使用起来就非常方便了。首先我们要在使用到该包的页面引入

import ACarousel

之后就在用到的地方，使用就好了，具体使用方案可以参见项目文档

if (resourceTopViewModel.resourceList.count > 0) { // 1
    Spacer()
    ACarousel(resourceTopViewModel.resourceList,
              autoScroll: .active(5)) { resource in
                                       NavigationLink(destination:ResourceDetailView(resource: resource)) { // 2
                                           AsyncImage(url: URL(string: resource.poster)!, // 3
                                                      placeholder: { Text("Loading ...") },
                                                      image: {
                                                          Image(uiImage: $0).resizable()
                                                      })
                                           .scaledToFill()
                                           .frame(height: 250)
                                           .cornerRadius(5)
                                       }

                                      }.frame(height: 250)
}

1. 这里做个判断，当轮播图数组为空的时候，不显示该View

2. 轮播图增加NavigationLink用来做点击跳转

3. 轮播图展示图片

这样就集成好了，是不是很简单？ 看看效果

image

2. 底部导航栏 TabView

底部导航栏就简单多了，新建一个View文件，把需要底部导航栏切换的View丢进去。

//  MainView.swift
//  FoloPro
//
//  Created by GUNNER on 2021/8/26.
//

import Foundation
import SwiftUI

struct MainView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "tropicalstorm")
                    Text("首页")
                }
            CategoryView()
                .tabItem {
                    Image(systemName: "circle.grid.3x3")
                    Text("分类")
                }
        }
    }
}

然后再把入口文件的View从之前的HomeView 替换成 新的 MainView就 OK了

//
//  FoloProApp.swift
//  FoloPro
//
//  Created by GUNNER on 2021/7/28.
//

import SwiftUI

@main
struct FoloProApp: App {
    var body: some Scene {
        WindowGroup {
            MainView()
        }
    }
}

看看效果

image image

这里看到的是 底部TabView 中使用了系统图标，Image(systemName: "circle.grid.3x3")，具体的系统图标可以下载应用SF Symbols来查看这些图标。

3. 分类页

上一节中我们通过底部导航来切换首页和分类页，接下来我们来实现以下分类页。

//
//  CategoryView.swift
//  FoloPro
//
//  Created by GUNNER on 2021/8/26.
//

import SwiftUI

struct CategoryView: View {
    @State var selected: Int? = nil
    @StateObject var categoryViewModel: CategoryViewModel = CategoryViewModel([])
    @StateObject var resourceViewModel: ResourceViewModel = ResourceViewModel()

    var body: some View {
        NavigationView{

            HStack {
                List(categoryViewModel.categoryList, id: \.self.id, selection: $selected) { category in
                    HStack {
                        Text(category.name)
                        Spacer()
                    }
                    .background((selected == category.id ? highlightOverlay : nil).offset(x: -10, y: 0))
                    .contentShape(Rectangle())
                    .onTapGesture {
                        selected = category.id
                        // 发送请求
                        resourceViewModel.getResourceListByCategory(category.name)
                    }
                }
                .listStyle(PlainListStyle())
                .frame(width: 100)
                .listStyle(SidebarListStyle())

                ResourceListView(viewModel: resourceViewModel)
            }.onAppear() {
                categoryViewModel.get()
            }

        }.navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)

    }

    var highlightOverlay: some View {
        Color.accentColor
            .opacity(0.8)
            .cornerRadius(10)
            .frame(height: 40)
            .frame(minWidth: 150, maxWidth: 200)
    }
}

最主要的是 左侧边栏，通过 .listStyle(SidebarListStyle()) 对List进行设置就好。 另外还要注意一个问题是，Navigation下的ListView的样式会被覆盖，所以这里我们优先通过.listStyle(PlainListStyle())来讲ListView的样式设置为默认状态。