iOS15 SwiftUI中按钮触发API请求后如何实现页面跳转？

由于iOS 15不支持NavigationPath和navigationDestination，我们可以通过**NavigationLink绑定状态变量**的方式实现需求，同时在按钮点击事件中处理异步API请求，请求成功后触发导航状态。

核心思路 #

1. 声明一个@State布尔变量，用来控制导航的激活状态。
2. 在视图中添加一个隐藏的NavigationLink，将其isActive参数绑定到这个状态变量。
3. 按钮点击时异步调用API，请求成功后更新状态变量触发导航；请求失败则处理错误（比如提示用户）。

完整代码示例 #

import SwiftUI

struct HomeView: View {
    // 控制导航触发的状态
    @State private var shouldNavigate = false
    // 存储API返回的数据，用于传递给下一个视图
    @State private var apiResponse: ApiResponse?
    
    var body: some View {
        NavigationView {
            Form {
                Button("提交请求并跳转") {
                    // 异步执行API调用
                    Task {
                        do {
                            let response = try await callTargetAPI()
                            // 请求成功后保存数据，触发导航
                            apiResponse = response
                            shouldNavigate = true
                        } catch {
                            // 这里可以替换成弹窗提示用户请求失败
                            print("API请求出错: \(error.localizedDescription)")
                        }
                    }
                }
            }
            .navigationTitle("首页")
            // 隐藏的NavigationLink，通过状态变量控制导航
            .background(
                NavigationLink(
                    destination: DetailView(response: apiResponse),
                    isActive: $shouldNavigate
                ) {
                    EmptyView()
                }
            )
        }
    }
    
    // 模拟API请求的异步方法，替换成你的实际请求逻辑
    private func callTargetAPI() async throws -> ApiResponse {
        // 模拟网络延迟
        try await Task.sleep(nanoseconds: 1_500_000_000)
        return ApiResponse(result: "请求成功，返回的内容")
    }
}

// 跳转目标视图
struct DetailView: View {
    let response: ApiResponse?
    
    var body: some View {
        VStack(spacing: 20) {
            Text("详情页")
                .font(.title)
            Text("API返回数据: \(response?.result ?? "无数据")")
                .font(.body)
        }
        .navigationTitle("详情")
    }
}

// 模拟API响应模型，根据你的实际接口定义修改
struct ApiResponse: Codable {
    let result: String
}

关键细节说明 #

• 用NavigationLink的isActive绑定实现状态驱动的导航，完全兼容iOS 15。
• API请求放在Task中执行，避免阻塞主线程，符合SwiftUI异步编程的最佳实践。
• 可以通过@State变量存储API返回的数据，再传递到目标视图，满足数据传递需求。
• 错误处理部分可以根据产品需求，替换成Alert或者其他用户友好的提示方式。

内容的提问来源于stack exchange，提问作者RP89