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)
}
这里做个判断，当轮播图数组为空的时候，不显示该View
轮播图增加NavigationLink用来做点击跳转
轮播图展示图片
这样就集成好了，是不是很简单？ 看看效果
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的样式设置为默认状态。
