SwiftUI中如何让图片按钮同时执行操作与页面跳转？

方法一：通过绑定布尔值触发跳转（兼容iOS13+） #

核心思路是用@State变量控制导航状态，按钮点击时先执行自定义操作，再修改变量触发跳转。

iOS16+ 版本（使用navigationDestination）

struct ContentView: View {
    @State private var shouldNavigate = false
    
    var body: some View {
        NavigationStack {
            Button("执行操作并跳转") {
                // 先执行你的自定义操作
                print("按钮操作执行")
                runCustomFunction()
                
                // 触发跳转
                shouldNavigate = true
            }
            .navigationDestination(isPresented: $shouldNavigate) {
                // 这里放你要跳转的目标界面
                TargetView()
            }
        }
    }
    
    func runCustomFunction() {
        // 你的业务逻辑代码
        print("自定义函数执行完成")
    }
}

struct TargetView: View {
    var body: some View {
        Text("这是新的界面")
            .navigationTitle("目标页")
    }
}

iOS13-15 版本（使用NavigationLink的isActive参数）

如果需要兼容旧系统，把navigationDestination换成隐藏的NavigationLink：

struct ContentView: View {
    @State private var shouldNavigate = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button("执行操作并跳转") {
                    print("按钮操作执行")
                    runCustomFunction()
                    shouldNavigate = true
                }
                
                // 隐藏的NavigationLink，通过shouldNavigate控制跳转
                NavigationLink(
                    destination: TargetView(),
                    isActive: $shouldNavigate
                ) {
                    EmptyView()
                }
            }
        }
    }
    
    func runCustomFunction() {
        print("自定义函数执行完成")
    }
}

方法二：通过NavigationStack的Path数组跳转（iOS16+） #

适合需要多页面层级导航的场景，通过向NavigationPath数组添加元素触发跳转，还能传递数据：

struct ContentView: View {
    @State private var navPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navPath) {
            Button("执行操作并跳转") {
                print("按钮操作执行")
                runCustomFunction()
                
                // 添加标识到路径，触发对应界面的跳转
                navPath.append("Target")
            }
            .navigationDestination(for: String.self) { identifier in
                if identifier == "Target" {
                    TargetView()
                }
            }
        }
    }
    
    func runCustomFunction() {
        print("自定义函数执行完成")
    }
}

为什么之前的嵌套写法不行？ #

• Button包裹NavigationLink：NavigationLink的点击事件优先级更高，会直接触发跳转，Button的action代码被跳过。
• NavigationLink包裹Button：Button会拦截点击事件，导致NavigationLink的跳转逻辑无法触发。

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