WatchOS中SwiftUI的NavigationLink无法正常工作的问题求助

核心问题分析 #

你的代码存在两个关键问题导致NavigationLink点击无反应：

1. 重复嵌套NavigationView：目标视图DestinationView中再次包裹了NavigationView，这会破坏导航栈的层级结构，导致导航行为失效。
2. NavigationView子视图布局错误：HomePageView中NavigationView直接包含两个并列子视图（Color和NavigationLink），SwiftUI的NavigationView期望根节点是单一视图，这种布局会导致NavigationLink的点击区域被异常遮挡或无法正确绑定到导航栈。

修正方案 #

1. 修复目标视图（移除重复NavigationView）

import SwiftUI

struct DestinationView: View {
    var body: some View {
        // 移除多余的NavigationView
        Text("SomeText")
            .navigationTitle("Destination") // 可选：添加导航标题
    }
}

struct DestinationView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览时需要包裹NavigationView，因为目标视图本身不再包含
        NavigationView {
            DestinationView()
        }
    }
}

2. 修复首页视图（调整布局层级）

将NavigationLink整合到NavigationView的根内容中，确保它属于导航栈的有效层级：

import SwiftUI

struct HomePageView: View {
    var body: some View {
        NavigationView{
            Color.mint
                .opacity(0.6)
                .ignoresSafeArea()
                .overlay{
                    VStack{
                        Text("SomeText")
                            .padding()
                            .font(Font.custom("Ubuntu-Title", size: 18))
                        
                        // 将NavigationLink移到VStack内，确保在导航栈的有效区域
                        NavigationLink(destination: DestinationView()){
                            Text("Navigate")
                                .padding()
                                .background(Color.white)
                                .cornerRadius(8) // 可选：增强点击可见性
                        }
                    }
                }
        }
    }
}

struct HomePageView_Previews: PreviewProvider {
    static var previews: some View {
        HomePageView()
    }
}

WatchOS专属替代方案（针对NavigationLink故障） #

如果上述修复仍无效（确实存在WatchOS旧版本中NavigationLink的兼容性问题），可以使用以下两种方案：

方案A：使用isActive绑定的NavigationLink

import SwiftUI

struct HomePageView: View {
    @State private var isNavigating = false
    
    var body: some View {
        NavigationView{
            Color.mint
                .opacity(0.6)
                .ignoresSafeArea()
                .overlay{
                    VStack{
                        Text("SomeText")
                            .padding()
                            .font(Font.custom("Ubuntu-Title", size: 18))
                        
                        Button("Navigate") {
                            isNavigating = true
                        }
                        // 隐藏的NavigationLink，通过绑定控制导航
                        NavigationLink(destination: DestinationView(), isActive: $isNavigating) {
                            EmptyView()
                        }
                    }
                }
        }
    }
}

方案B：使用NavigationStack（WatchOS9及以上）

import SwiftUI

struct HomePageView: View {
    var body: some View {
        // 用NavigationStack替代NavigationView
        NavigationStack{
            Color.mint
                .opacity(0.6)
                .ignoresSafeArea()
                .overlay{
                    VStack{
                        Text("SomeText")
                            .padding()
                            .font(Font.custom("Ubuntu-Title", size: 18))
                        
                        NavigationLink("Navigate", destination: DestinationView())
                    }
                }
        }
    }
}

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