SwiftUI使用NavigationView嵌套视图时FocusState动画失效问题

问题表现 #

• 实现TextField交互逻辑：点击输入框进入编辑状态时，右侧Cancel按钮从右侧滑入展示
• TestView作为独立视图运行时动画正常，通过NavigationLink嵌入NavigationView导航栈跳转后，动画完全失效，按钮直接出现/消失无过渡效果
• 原始独立视图TestView实现代码：

struct TestView: View {
    @FocusState private var isEditing: Bool
    
    var body: some View {
        VStack {
            Button("click me", action: { isEditing.toggle() })

            HStack {
                TextField("Search", text: .constant("test"))
                    .focused($isEditing)
                    .padding(8)
                    .padding(.leading, 25)
                    .padding(.trailing, 22)
                    .background(Color.gray)
                    .cornerRadius(10)
                    .padding(.horizontal)
                if isEditing {
                    Button {} label: {
                        ZStack {
                            Text("Cancel")
                                .foregroundColor(.primary)
                                .padding(.trailing)
                        }
                    }
                    .transition(.move(edge: .trailing))
                }
            }
            .animation(.spring(), value: isEditing)
            .navigationBarHidden(true)
        }
    }
}

• 导航跳转入口TestView2实现代码：

struct TestView2: View {
    @State var test: Bool = false
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(isActive: $test, destination: { TestView() }, label: {})
                Button("click me", action: { test.toggle() })
            }
            .navigationBarHidden(true)
        }
    }
}

问题原因 #

该问题既不是SwiftUI系统bug，也不是@FocusState不适合作为动画触发源，核心原因是SwiftUI动画事务优先级冲突：

1. 点击输入框触发焦点变更时，系统对isEditing的修改默认不携带动画上下文，原代码依赖挂载在HStack上的隐式动画捕获值变化生成过渡效果
2. 当视图通过NavigationLink推入导航栈时，导航转场自带的根事务会拦截子视图的隐式动画触发，导致transition效果被跳过，直接呈现最终状态
3. 独立视图场景下没有父级转场事务的拦截，隐式动画可以正常生效

修复方案 #

最稳定的兼容方案是显式指定动画事务，避免依赖隐式动画被父级事务拦截，两种实现方式可选：

方案1：监听焦点状态显式驱动动画（兼容性最好） #

新增独立状态控制按钮展示，监听isEditing变化时在显式动画闭包内更新状态，保证所有触发焦点变更的场景（点击输入框、点击测试按钮、代码触发焦点切换）都能正常触发动画：

struct TestView: View {
    @FocusState private var isEditing: Bool
    // 新增状态专门驱动按钮展示动画
    @State private var showCancelButton = false
    
    var body: some View {
        VStack {
            Button("click me", action: { isEditing.toggle() })

            HStack {
                TextField("Search", text: .constant("test"))
                    .focused($isEditing)
                    .padding(8)
                    .padding(.leading, 25)
                    .padding(.trailing, 22)
                    .background(Color.gray)
                    .cornerRadius(10)
                    .padding(.horizontal)
                if showCancelButton {
                    Button {} label: {
                        Text("Cancel")
                            .foregroundColor(.primary)
                            .padding(.trailing)
                    }
                    .transition(.move(edge: .trailing))
                }
            }
            .onChange(of: isEditing) { newValue in
                // 显式包裹动画事务，不受父级导航事务影响
                withAnimation(.spring()) {
                    showCancelButton = newValue
                }
            }
            .navigationBarHidden(true)
        }
    }
}

方案2：调整隐式动画作用域（代码改动最小） #

将隐式动画修饰符从HStack移动到根VStack层级，阻断父级导航事务的干扰，iOS 15+系统可用：

struct TestView: View {
    @FocusState private var isEditing: Bool
    
    var body: some View {
        VStack {
            Button("click me", action: { isEditing.toggle() })

            HStack {
                TextField("Search", text: .constant("test"))
                    .focused($isEditing)
                    .padding(8)
                    .padding(.leading, 25)
                    .padding(.trailing, 22)
                    .background(Color.gray)
                    .cornerRadius(10)
                    .padding(.horizontal)
                if isEditing {
                    Button {} label: {
                        Text("Cancel")
                            .foregroundColor(.primary)
                            .padding(.trailing)
                    }
                    .transition(.move(edge: .trailing))
                }
            }
            .navigationBarHidden(true)
        }
        // 动画放在根视图层级，避免被HStack层的父事务拦截
        .animation(.spring(), value: isEditing)
    }
}

两种修改方式都可以保证TestView在独立展示、导航栈推入两种场景下动画正常运行。

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