SwiftUI 网络请求以及数据加载

前言

SwiftUI只是UI，网络请求和Swift一样通用，至于网络请求封装这块我就不在一一赘述，想看的话请看swift 使用 Moya 进行网络请求
下面我来说下网络请求方法，我也是一个初学者，其中有各种不严谨的地方请大家留言，我也会在后续学习中慢慢补充，

1 List 数据加载

Model这块和Swift 没有什么区别，我就不放了
此处只做了一次加载

1、ViewModel处代码

• @Published 修饰符属性 告知 Swift 随时关注这个变量的变化。如果发生任何变化，所有视图中使用了该变量的 body 都将更新。
• 我们将接收到网络请求的数据赋值给 model 属性，这将会触发我们在 步骤 1 中提到的动作。

//此处我封装的网络请求组件
import YLNetTool

class YLStudyVM: ObservableObject {
    
    
    @Published var model: YLStudyModel? = nil
    
    init() {
    
    
        getList()
    }
    
    func getList() {
    
    
        YLNetTool.request(target: YLStudyApi.study_list,
                          modelType: YLStudyModel.self) {
    
     [weak self]code, model in
            self?.model = model
            print("666")
        } failureBlock: {
    
     code, msg in
            print("???")
        }
    }
}

2、row中代码

此处主要是添加 model，个人感觉和Swift中并没有太多区别, 可忽略

struct YLStudyRow: View {
    var model: YLStudyModel.resultModel? = nil
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(model?.title ?? "") 
                .font(.system(size: 14, weight: .medium))
                .padding(EdgeInsets(top: 10, leading: 15, bottom: 0, trailing: 10))
            Text("上次学到：你知道你的钱去哪里了么？")
                .foregroundColor(RGB(102))
                .font(.system(size: 13, weight: .regular))
                .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10))
            HStack {
                Text("已学习：0%")
                    .foregroundColor(.red)
                    .font(.system(size: 12, weight: .regular))
                Spacer()
                Text("进入学习")
                    .foregroundColor(.white)
                    .font(.system(size: 12, weight: .medium))
                    .frame(width: 70, height: 24)
                    .background(
                        LinearGradient(gradient: Gradient(colors:[RGB(255, 101, 86), RGB(249, 0, 0)]),
                                       startPoint: .top,
                                       endPoint: .bottom
                                      )
                    )
                    .cornerRadius(12)
            }
            .padding(EdgeInsets(top: 16, leading: 10, bottom: 0, trailing: 10))
        }
        .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 10))
        .background(Color.white)
        .cornerRadius(10)
    }
}

struct YLStudyRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            YLStudyRow()
                .previewLayout(.fixed(width: 414, height: 120))
        }
    }
}

3、主页面获取网络请求、刷新

struct YLStudy: View { 
    @ObservedObject var viewModel = YLStudyVM()
    
    init() {
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        List() {
            Section(header: YLStudyHeader()) {
                ForEach(0 ..< (viewModel.model?.getUserBuyMicroCourseResults.count ?? 0)) { index in
                    YLStudyRow(model: viewModel.model?.getUserBuyMicroCourseResults[index])
                        .listRowSeparator(.hidden) 
                }
            }
        }
        .listStyle(.grouped)
        .background(RGB(245))
        .navigationTitle("学习")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct YLStudy_Previews: PreviewProvider {
    static var previews: some View {
        YLStudy()
    }
}

借鉴文章
使用 SwiftUI 开发一个 APP - 列表视图 & 网络请求