SwiftUI中NavigationLink无法跳转页面的问题求助

嘿，我帮你找出了两个导致NavigationLink无法触发跳转的核心原因，咱们一步步来修复：

1. 缺少导航容器上下文 #

SwiftUI的NavigationLink必须嵌套在导航容器内部才能正常工作——iOS 16及以上用NavigationStack，iOS 15及更早版本用NavigationView。你的代码里完全没有这个外层容器，所以点击后系统根本不知道该怎么处理导航逻辑。

2. 冗余的Button嵌套 #

你把Button放在了NavigationLink内部，这会导致点击事件被Button优先捕获，反而阻断了NavigationLink的导航触发。而且其实NavigationLink本身支持自定义标签样式，完全不需要额外嵌套Button。

修复后的代码（iOS 16+ 版本） #

struct _LoginView: View {
    var body: some View {
        // 外层添加NavigationStack作为导航容器
        NavigationStack {
            Color.green
                .edgesIgnoringSafeArea(.all)
                .overlay(
                    VStack(alignment: .center, spacing: 15) {
                        Image("Bg")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 130, height: 130, alignment: .center)
                            .clipShape(Circle())
                        
                        Spacer()
                        
                        // 直接用NavigationLink自定义样式，去掉嵌套的Button
                        NavigationLink(destination: _LoginViewMain()) {
                            Text("SIGN IN")
                                .frame(minWidth: 0, maxWidth: .infinity)
                                .font(.system(size: 18))
                                .padding()
                                .foregroundColor(.white)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 25)
                                        .stroke(Color.white, lineWidth: 2)
                                )
                        }
                        // 如果需要点击时执行额外逻辑，添加onTapGesture
                        .onTapGesture {
                            print("SIGN IN clicked")
                        }
                        
                        NavigationLink(destination: _LoginViewMain()) {
                            Text("SIGN UP")
                                .frame(minWidth: 0, maxWidth: .infinity)
                                .font(.system(size: 18))
                                .padding()
                                .foregroundColor(.green)
                                .background(Color.white)
                                .cornerRadius(25)
                        }
                        .onTapGesture {
                            print("SIGN UP clicked")
                        }
                    }
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .padding([.leading, .trailing], 30)
                    .foregroundColor(Color.green)
                    .padding([.top, .bottom], 100)
                )
        }
    }
}

兼容iOS 15及更早版本的代码 #

如果需要支持旧系统，把NavigationStack换成NavigationView即可：

// 替换外层容器为NavigationView
NavigationView {
    // 原内容不变...
}
.navigationViewStyle(.stack) // 确保使用栈式导航

额外说明 #

如果你的业务逻辑确实需要在导航跳转前执行复杂操作（比如验证输入、请求接口），更推荐使用绑定式NavigationLink的写法，示例如下：

struct _LoginView: View {
    @State private var isNavigateToMain = false
    
    var body: some View {
        NavigationStack {
            Color.green
                .edgesIgnoringSafeArea(.all)
                .overlay(
                    VStack(alignment: .center, spacing: 15) {
                        // ... 其他UI元素
                        
                        // 用Button触发逻辑，再通过绑定控制导航
                        Button(action: {
                            print("SIGN IN clicked")
                            // 这里可以添加验证等逻辑
                            isNavigateToMain = true
                        }) {
                            Text("SIGN IN")
                                .frame(minWidth: 0, maxWidth: .infinity)
                                .font(.system(size: 18))
                                .padding()
                                .foregroundColor(.white)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 25)
                                        .stroke(Color.white, lineWidth: 2)
                                )
                        }
                        
                        // 隐藏的NavigationLink，通过绑定控制跳转
                        NavigationLink(
                            destination: _LoginViewMain(),
                            isActive: $isNavigateToMain,
                            label: { EmptyView() }
                        )
                    }
                )
        }
    }
}

这样既可以灵活处理点击逻辑，又能正常触发导航。

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