如何实现NavigationLink点击后延迟切换至目标视图？

核心思路是手动控制导航触发时机，替代NavigationLink的默认自动跳转逻辑，先完成主视图的自定义动画，再启动导航切换。以下是两种可行实现方案：

方案一：使用isActive绑定控制导航（兼容iOS 13+） #

struct MainView: View {
    @State private var shouldNavigate = false
    @State private var isAnimating = false
    let item: YourItemType // 替换为你的item实际类型

    var body: some View {
        NavigationView { // iOS 16+可替换为NavigationStack
            VStack {
                // 主视图中需要执行动画的元素
                YourAnimatableView()
                    .scaleEffect(isAnimating ? 0.8 : 1.0)
                    .opacity(isAnimating ? 0.5 : 1.0)
                
                // 用Button替代原NavigationLink的点击触发
                Button("进入表单") {
                    // 1. 启动主视图自定义动画
                    withAnimation(.easeInOut(duration: 0.5)) {
                        isAnimating = true
                    }
                    
                    // 2. 延迟后触发导航（延迟时长匹配动画时长）
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        withAnimation {
                            shouldNavigate = true
                        }
                    }
                }
                
                // 隐藏的NavigationLink，通过isActive控制跳转
                NavigationLink(
                    destination: MyForm(item),
                    isActive: $shouldNavigate,
                    label: { EmptyView() }
                )
            }
        }
        .onChange(of: shouldNavigate) { _, isNavigating in
            if !isNavigating {
                // 从表单返回时重置动画状态
                withAnimation {
                    isAnimating = false
                }
            }
        }
    }
}

方案二：使用NavigationPath控制导航（iOS 16+） #

如果项目基于iOS 16及以上，推荐用NavigationStack的路径管理方式，更灵活：

struct MainView: View {
    @State private var navigationPath = NavigationPath()
    @State private var isAnimating = false
    let item: YourItemType

    var body: some View {
        NavigationStack(path: $navigationPath) {
            VStack {
                YourAnimatableView()
                    .scaleEffect(isAnimating ? 0.8 : 1.0)
                    .opacity(isAnimating ? 0.5 : 1.0)
                
                Button("进入表单") {
                    withAnimation(.easeInOut(duration: 0.5)) {
                        isAnimating = true
                    }
                    
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        navigationPath.append(item)
                    }
                }
            }
            .navigationDestination(for: YourItemType.self) { item in
                MyForm(item)
            }
        }
        .onChange(of: navigationPath) { _, newPath in
            if newPath.isEmpty {
                withAnimation {
                    isAnimating = false
                }
            }
        }
    }
}

关键说明 #

• 手动拆分「动画执行」和「导航触发」两个步骤，通过DispatchQueue.main.asyncAfter设置延迟，确保主视图动画完成后再启动导航
• 延迟时长建议和自定义动画的duration保持一致，避免出现动画未完成就跳转的情况
• 从表单返回时通过onChange监听导航状态，重置动画相关的状态变量，保证下次点击的动画正常执行

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