SwiftUI中点击弹窗OK按钮跳转至ChatScreen的实现方法

在SwiftUI里，Alert是独立的模态视图，不属于NavigationStack的导航层级，所以直接在Alert按钮里嵌套或添加NavigationLink是无效的。得通过控制导航状态来实现跳转，下面是两种可行方案：

方案一：使用NavigationPath（iOS 16+ 推荐） #

这种方式更灵活，适合多页面导航场景：

1. 在父视图中声明导航路径变量
2. 将NavigationStack与该路径绑定
3. 在OK按钮的点击事件中，把目标页面添加到导航路径里

完整代码示例：

import SwiftUI

struct ContentView: View {
    @State private var showConfirmationPopup = false
    @State private var navigationPath = NavigationPath() // 导航路径
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            Button("Show Popup") {
                showConfirmationPopup = true
            }
            .alert(
                Text("enter chat screen"),
                isPresented: $showConfirmationPopup
            ) {
                Button("Cancel", role: .cancel) {}
                Button("OK") {
                    print("enter screen tapped")
                    // 将ChatScreen添加到导航路径，触发跳转
                    navigationPath.append(ChatScreen())
                }
            } message: {
                Text("enter chat screen?")
            }
            // 注册导航目标，指定路径中的元素对应跳转的页面
            .navigationDestination(for: ChatScreen.self) { chatScreen in
                chatScreen
            }
        }
    }
}

struct ChatScreen: View {
    var body: some View {
        Text("Chat Screen")
            .navigationTitle("Chat")
    }
}

如果需要更规范的导航（比如用枚举区分页面类型），可以定义一个页面枚举：

enum AppPage: Hashable {
    case chat
}

// 父视图中修改：
@State private var navigationPath = NavigationPath()

// OK按钮里：
navigationPath.append(AppPage.chat)

// navigationDestination修改为：
.navigationDestination(for: AppPage.self) { page in
    switch page {
    case .chat:
        ChatScreen()
    }
}

方案二：使用绑定布尔值（兼容iOS 15及以下） #

如果需要兼容更低版本iOS，可以用隐藏的NavigationLink配合布尔状态：

1. 声明控制跳转的布尔变量
2. 在NavigationStack内添加一个隐藏的NavigationLink，用isActive绑定该变量
3. 在OK按钮点击时把布尔值设为true

完整代码示例：

import SwiftUI

struct ContentView: View {
    @State private var showConfirmationPopup = false
    @State private var shouldNavigateToChat = false // 跳转控制变量
    
    var body: some View {
        NavigationView { // iOS15及以下用NavigationView，iOS16+也可以用NavigationStack
            VStack {
                Button("Show Popup") {
                    showConfirmationPopup = true
                }
                // 隐藏的NavigationLink，通过isActive控制跳转
                NavigationLink(
                    destination: ChatScreen(),
                    isActive: $shouldNavigateToChat,
                    label: { EmptyView() }
                )
            }
            .alert(
                Text("enter chat screen"),
                isPresented: $showConfirmationPopup
            ) {
                Button("Cancel", role: .cancel) {}
                Button("OK") {
                    print("enter screen tapped")
                    shouldNavigateToChat = true // 触发跳转
                }
            } message: {
                Text("enter chat screen?")
            }
        }
    }
}

struct ChatScreen: View {
    var body: some View {
        Text("Chat Screen")
            .navigationTitle("Chat")
    }
}

为什么之前的方法无效？ #

NavigationLink必须处于NavigationStack（或iOS15及以下的NavigationView）的直接视图层级内才能被导航系统识别，而Alert是浮在界面上层的模态视图，不在这个层级里，所以直接在Alert里放NavigationLink不会触发跳转。

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