SwiftUI弹窗调用与网络模型加载问题求助

一、正确调用弹窗的实现方式 #

SwiftUI中弹窗的显示完全由状态变量控制，核心是通过@State或@Binding绑定状态，配合.alert、.sheet等视图修饰符实现。

基础Alert弹窗示例 #

struct ContentView: View {
    // 用Bool状态控制弹窗显示/隐藏
    @State private var showAlert = false
    
    var body: some View {
        Button("触发弹窗") {
            showAlert = true
        }
        .alert("提示标题", isPresented: $showAlert) {
            Button("确认", role: .cancel) {}
        } message: {
            Text("这是弹窗的提示内容")
        }
    }
}

自定义Sheet弹窗示例 #

// 自定义弹窗视图
struct CustomPopupView: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        VStack(spacing: 20) {
            Text("自定义弹窗内容")
                .font(.title)
            Button("关闭弹窗") {
                isPresented = false
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(12)
    }
}

struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        Button("打开自定义弹窗") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            CustomPopupView(isPresented: $showSheet)
        }
    }
}

核心注意点：

• 必须用@State（本地状态）或@Binding（跨视图传递状态）修饰控制弹窗的变量，确保状态变化能触发视图更新
• 所有修改弹窗状态的操作，必须在主线程执行（网络请求等异步操作需切换回主线程）

二、网络加载JSON模型的正确实现与错误处理 #

JSON加载失败通常是模型不匹配、异步操作未正确处理、状态管理混乱导致的，以下是完整的实现方案：

步骤1：定义符合Codable协议的模型 #

确保模型字段名、类型与返回的JSON结构完全一致：

// 示例JSON结构：{"productName":"SwiftUI教程","price":29.9,"isOnSale":true}
struct Product: Codable {
    let productName: String
    let price: Double
    let isOnSale: Bool
}

如果JSON字段是下划线命名（如product_name），可添加解码策略适配：

let decoder = JSONDecoder()
decoder.keyDecodingStrategy = .convertFromSnakeCase

步骤2：实现网络加载与状态管理 #

用枚举管理加载状态，避免异步操作导致的视图混乱，同时确保弹窗状态正常：

struct ContentView: View {
    @State private var showAlert = false
    @State private var alertMsg = ""
    // 用枚举管理加载的不同状态
    @State private var loadState: LoadState = .idle
    
    enum LoadState {
        case idle, loading, success(Product), failure(String)
    }
    
    var body: some View {
        VStack(spacing: 16) {
            switch loadState {
            case .idle:
                Button("加载产品数据") {
                    loadProductData()
                }
            case .loading:
                ProgressView("加载中...")
            case .success(let product):
                VStack(alignment: .leading) {
                    Text("产品名称：\(product.productName)")
                    Text("价格：\(product.price)元")
                    Text(product.isOnSale ? "促销中" : "原价")
                        .foregroundColor(product.isOnSale ? .red : .gray)
                }
            case .failure(let error):
                Text("加载失败：\(error)")
                Button("重新加载") {
                    loadProductData()
                }
            }
        }
        .alert("加载通知", isPresented: $showAlert) {
            Button("确认") {}
        } message: {
            Text(alertMsg)
        }
    }
    
    func loadProductData() {
        loadState = .loading
        guard let url = URL(string: "https://your-api-url.com/product") else {
            loadState = .failure("无效的请求地址")
            alertMsg = "无效的请求地址"
            showAlert = true
            return
        }
        
        URLSession.shared.dataTask(with: url) { data, _, error in
            // 异步操作必须切回主线程更新UI
            DispatchQueue.main.async {
                if let error = error {
                    loadState = .failure(error.localizedDescription)
                    alertMsg = "网络请求失败：\(error.localizedDescription)"
                    showAlert = true
                    return
                }
                
                guard let data = data else {
                    loadState = .failure("未获取到数据")
                    alertMsg = "未获取到数据"
                    showAlert = true
                    return
                }
                
                do {
                    let product = try JSONDecoder().decode(Product.self, from: data)
                    loadState = .success(product)
                    alertMsg = "数据加载成功"
                    showAlert = true
                } catch {
                    loadState = .failure("JSON解析失败：\(error.localizedDescription)")
                    alertMsg = "JSON解析失败：\(error.localizedDescription)"
                    showAlert = true
                }
            }
        }.resume()
    }
}

核心注意点：

• 网络请求完成后必须切换回主线程更新状态和弹窗，否则会导致UI异常
• 用枚举管理加载状态，避免因为异步操作导致的视图冲突，确保弹窗只在明确的状态下触发
• 错误处理要覆盖URL无效、网络错误、数据为空、解析失败等所有场景

内容的提问来源于stack exchange，提问作者Константин