210c8f1470e8c26b7797fef4d8adb144
SwiftUI 内功之构建无限列表infinite list combine

实战需求

SwiftUI 内功之构建无限列表infinite list combine

本文价值与收获

看完本文后,您将能够作出下面的界面

SwiftUI 内功之构建无限列表infinite list combine

SwiftUI 内功之构建无限列表infinite list combine

SwiftUI 内功之构建无限列表infinite list combine

SwiftUI 内功之构建无限列表infinite list combine

实战教程

1. 创建新的 SwiftUI 项目

 创建新的 SwiftUI 项目

创建新的 SwiftUI 项目

2. 创建可解码的用户模型

创建一个名为User.swift. 我们只有解码id,name以及avatarUrl从JSON对象。如上面的结果所示,在这个项目中,我们将只显示用户名作为一个简单的例子。您可以稍后对其进行增强以显示用户头像和个人资料详细信息。

import Foundation

struct User: Decodable {
    let id: Int
    let name: String
    let avatarUrl: String

    enum CodingKeys: String, CodingKey {
        case id
        case name = "login"
        case avatarUrl = "avatar_url"
    }
}

3. 添加行视图

由于我们使用的是List,我们将首先创建行视图作为列表项。添加一个名为UserRow.swift. 然后,插入下面的代码。我们将使用一个简单的HStackwithImage和Text。
请注意,此UserRow视图需要User作为依赖模型,这意味着如果没有将模型传递给此视图,则无法对其进行初始化。

import SwiftUI

struct UserRow: View {
    let user: User
    var body: some View {
        HStack (spacing: 12) {
            Image("imagePlaceholder")
                .resizable()
                .frame(width: 50, height: 50)
                .clipShape(Circle())
            Text(user.name)
        }
        .padding(4)

    }
}

struct UserRow_Previews: PreviewProvider {
    static var previews: some View {
        let mockUser = User(id: 1, name: "John Doe", avatarUrl: "")
        UserRow(user: mockUser)
    }
}

4. 主视图(ContentView)

这ContentView是我们的默认主视图。主视图在InfiniteListSwiftUIApp文件(ProjectNameApp 文件)中定义。
伟大的。让我们包括 aNavigationView和 a List。然后,插入一些静态用户数据。

struct ContentView: View {
    var users = [
        User(id: 100, name: "Bob", avatarUrl: ""),
        User(id: 200, name: "Alice", avatarUrl: "")
    ]
    var body: some View {
        NavigationView {
            List {
                ForEach(users, id: \.id) { user in
                    UserRow(user: user)
                }
            }
            .navigationTitle("GitHub Users")
            .navigationBarTitleDisplayMode(.automatic)
        }
    }
}

主视图(ContentView)

主视图(ContentView)

项目文件

175_swiftui_infinitelist_01.zip
链接:https://pan.baidu.com/s/1BfrCvt27vZU4QioQ1PDmxQ 密码:xzny

5.创建API服务

在这一步中,我们将创建一个 API 服务来从 GitHub API 获取用户数据。如下图所示,要启用分页,我们需要发送since和per_page参数。

创建API服务

创建API服务

将以下代码添加到名为APIService.swift. 由于我们使用的是 SwiftUI,项目自动支持 iOS13+。我们将使用combine和URLSession。

import Foundation
import Combine

class APIService {
    static let shared = APIService()
    // 1
    func getUsers(perPage: Int = 30, sinceId: Int? = nil) -> AnyPublisher<[User], Error> {
        // 2
        var components = URLComponents(string: "https://api.github.com/users")!
        components.queryItems = [
            URLQueryItem(name: "per_page", value: "\(perPage)"),
            URLQueryItem(name: "since", value: (sinceId != nil) ? "\(sinceId!)" : nil)
        ]
        // 3
        let request = URLRequest(url: components.url!, timeoutInterval: 10)
        // 4
        return URLSession.shared.dataTaskPublisher(for: request)
            .map(\.data)
            .decode(type: [User].self, decoder: JSONDecoder())
            .eraseToAnyPublisher()
    }
}
  • 创建一个接受函数perPage和sinceId,并返回一个AnyPublisher类型[User]。
  • 构造具有指定参数的 URL。
  • 创建一个超时时间为 10 秒的 URL 请求。
  • 使用 发送请求dataTaskPublisher。然后将结果映射到.data(结果将返回Data和Response)。最后,将数据解码为[User]. 它简单而干净,对吧?
top Created with Sketch.