数据获取与展示

在SwiftUI中，将网络数据展示在视图上是一个重要的技能。你可以通过使用@StateObject和@Published来管理数据流。首先，确保你有一个符合ObservableObject协议的ViewModel。

创建ViewModel

1. 定义模型：首先，定义一个数据模型。例如，假设你要展示用户信息，可以创建一个User结构体。

   struct User: Codable {
       let id: Int
       let name: String
       let email: String
   }

2. 创建ViewModel：接下来，创建一个ViewModel，负责从网络获取数据。

   class UserViewModel: ObservableObject {
       @Published var users: [User] = []
       
       func fetchUsers() {
           guard let url = URL(string: "https://api.example.com/users") else { return }
           URLSession.shared.dataTask(with: url) { data, response, error in
               if let data = data {
                   let decodedUsers = try? JSONDecoder().decode([User].self, from: data)
                   DispatchQueue.main.async {
                       self.users = decodedUsers ?? []
                   }
               }
           }.resume()
       }
   }

在视图中使用ViewModel

在SwiftUI视图中，你可以使用@StateObject来创建ViewModel的实例，并在视图中展示数据。

struct UserListView: View {
    @StateObject var viewModel = UserViewModel()
    
    var body: some View {
        List(viewModel.users, id: \.id) { user in
            VStack(alignment: .leading) {
                Text(user.name).font(.headline)
                Text(user.email).font(.subheadline)
            }
        }
        .onAppear {
            viewModel.fetchUsers()
        }
    }
}

处理加载状态

为了提升用户体验，可以在数据加载时显示一个加载指示器。你可以在ViewModel中添加一个isLoading属性。

class UserViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var isLoading: Bool = false
    
    func fetchUsers() {
        isLoading = true
        // 网络请求代码...
        isLoading = false
    }
}

在视图中，你可以根据isLoading的状态来显示不同的内容。

var body: some View {
    if viewModel.isLoading {
        ProgressView()
    } else {
        List(viewModel.users, id: \.id) { user in
            // 用户信息展示
        }
    }
}

错误处理

在网络请求中，处理错误是非常重要的。你可以在ViewModel中添加一个errorMessage属性。

@Published var errorMessage: String?

在网络请求中，如果发生错误，可以更新这个属性，并在视图中展示错误信息。

if let error = error {
    DispatchQueue.main.async {
        self.errorMessage = error.localizedDescription
    }
}

在视图中，你可以添加一个文本框来显示错误信息。

if let errorMessage = viewModel.errorMessage {
    Text(errorMessage).foregroundColor(.red)
}

通过以上步骤，你可以轻松地将网络数据展示在SwiftUI视图上，提升用户体验并确保数据的实时更新。🎉