使用SwiftUI从json数据加载更多功能

基础概念

SwiftUI 是苹果推出的一个现代 UI 框架，它允许开发者使用声明式语法来构建用户界面。从 JSON 数据加载更多功能通常涉及到网络请求、数据解析和状态管理。

类型

简单数据加载：直接从 JSON 文件或 API 加载数据并显示。
分页加载：当用户滚动到列表底部时，自动加载更多数据。
无限滚动：类似于分页加载，但用户无需到达列表底部即可触发加载。

应用场景

新闻应用：展示新闻列表，并允许用户滚动加载更多新闻。
社交媒体应用：显示用户的时间线，并在用户滚动时加载更多帖子。
电商应用：展示商品列表，并允许用户加载更多商品查看。

示例代码

以下是一个简单的 SwiftUI 应用示例，展示了如何从 JSON 数据加载更多内容，并实现分页加载功能。

import SwiftUI
import Combine

struct ContentView: View {
    @State private var items: [Item] = []
    @State private var isLoading = false
    @State private var hasMoreData = true
    private var cancellable: AnyCancellable?

    var body: some View {
        List(items) { item in
            Text(item.title)
        }
        .onAppear {
            loadMoreItems()
        }
        .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
        .overlay(
            Group {
                if isLoading {
                    ProgressView("Loading...")
                }
            }
            .frame(height: 50)
            .padding(.vertical)
        )
    }

    private func loadMoreItems() {
        guard !isLoading && hasMoreData else { return }
        isLoading = true

        cancellable = APIService.fetchItems(page: items.count / 10 + 1)
            .sink(receiveCompletion: { completion in
                self.isLoading = false
                switch completion {
                case .finished:
                    break
                case .failure(let error):
                    print("Error fetching data: \(error)")
                }
            }, receiveValue: { newItems in
                if newItems.isEmpty {
                    hasMoreData = false
                } else {
                    items.append(contentsOf: newItems)
                }
            })
    }
}

struct Item: Identifiable {
    let id = UUID()
    let title: String
}

class APIService {
    static func fetchItems(page: Int) -> AnyPublisher<[Item], Error> {
        // Replace with actual API call
        return URLSession.shared.dataTaskPublisher(for: URL(string: "https://api.example.com/items?page=\(page)")!)
            .map { $0.data }
            .decode(type: [Item].self, decoder: JSONDecoder())
            .eraseToAnyPublisher()
    }
}