如何在点击NavigationLink标签时同时执行操作与页面导航？

原始代码 #

struct ContentView: View {
    @State var num = 0
    var body: some View {
        VStack {
            NavigationStack {
                NavigationLink(destination: {
                    Text("Number: \(num)")
                }, label: {
                    Text("tap here").onTapGesture {
                       num += 1
                        print("\(num)")
                    }
                })
            }
        }
    }
}

问题原因 #

你遇到的问题是：给Text添加的onTapGesture会拦截点击事件，导致NavigationLink的默认导航行为被屏蔽，只能触发自定义逻辑。以下是两种可行的解决方法：

方法一：使用simultaneousGesture同步触发操作与导航 #

将自定义操作绑定到NavigationLink本身的同步手势上，让默认导航和自定义逻辑同时执行：

struct ContentView: View {
    @State var num = 0
    var body: some View {
        VStack {
            NavigationStack {
                NavigationLink(destination: {
                    Text("Number: \(num)")
                }, label: {
                    Text("tap here")
                })
                .simultaneousGesture(TapGesture().onEnded {
                    num += 1
                    print("\(num)")
                })
            }
        }
    }
}

方法二：通过isActive绑定手动控制导航 #

用Button触发自定义操作，同时通过状态变量控制NavigationLink的导航时机：

struct ContentView: View {
    @State var num = 0
    @State var isShowingDetail = false
    
    var body: some View {
        VStack {
            NavigationStack {
                Button("tap here") {
                    num += 1
                    print("\(num)")
                    isShowingDetail = true
                }
                
                NavigationLink(isActive: $isShowingDetail) {
                    Text("Number: \(num)")
                } label: {
                    EmptyView()
                }
            }
        }
    }
}

原理说明 #

• 方法一利用simultaneousGesture让自定义手势与NavigationLink的默认点击事件共存，互不干扰；
• 方法二分离了操作触发和导航控制，通过状态变量明确控制导航时机，灵活性更高。

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