SwiftUI：如何解决底部按钮与键盘联动的异常动画问题

线上应用存在SwiftUI键盘动画异常，具体表现为：延迟让TextField获取焦点后，键盘完成弹出动画时，底部按钮后方的背景会短暂闪烁。

以下是复现问题的示例代码：视图包含TextField和底部按钮，设置视图出现0.75秒后让TextField自动获取焦点。

struct NameTextFieldView: View {
    @Environment(\.dismiss) var dismiss
    @FocusState private var isFocused: Bool
    @State private var name: String = ""
    
    var body: some View {
        NavigationStack {
            Form {
                TextField("Name", text: $name)
                    .focused($isFocused)
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.75) {
                          isFocused = true
                        }
                    }
            }
            .safeAreaInset(edge: .bottom) {
                Button(action: {
                    dismiss()
                }, label: {
                    Text("Add")
                        .foregroundStyle(Color.white)
                })
                .frame(width: 200, height: 44)
                .background(Color.blue)
                .clipShape(RoundedRectangle(cornerSize: CGSize(width: 20, height: 10)))
                .padding()
            }
            .navigationTitle("Add Name")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

异常动画效果：

问题根源分析 #

这个bug的核心是Form（List子类）的自动布局动画与safeAreaInset的背景渲染冲突：

• 键盘弹出时，Form会自动调整内容区域以避开键盘，过程带有系统默认动画；
• safeAreaInset默认背景透明，当Form布局动画结束瞬间，Form背景与safeAreaInset区域背景会出现短暂重绘不一致，进而导致闪烁。

解决办法 #

方案1：给safeAreaInset添加匹配Form的背景色 #

给safeAreaInset的容器设置和Form一致的背景色，避免透明背景带来的重绘冲突：

.safeAreaInset(edge: .bottom) {
    VStack {
        Button(action: {
            dismiss()
        }, label: {
            Text("Add")
                .foregroundStyle(Color.white)
        })
        .frame(width: 200, height: 44)
        .background(Color.blue)
        .clipShape(RoundedRectangle(cornerSize: CGSize(width: 20, height: 10)))
        .padding()
    }
    .background(Color(UIColor.systemBackground)) // 匹配Form的系统背景色
}

方案2：替换Form为自定义ScrollView #

Form的默认布局逻辑带有特殊动画处理，换成普通ScrollView+VStack可避免系统默认布局冲突：

struct NameTextFieldView: View {
    @Environment(\.dismiss) var dismiss
    @FocusState private var isFocused: Bool
    @State private var name: String = ""
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 16) {
                    TextField("Name", text: $name)
                        .focused($isFocused)
                        .padding()
                        .background(Color(UIColor.systemGray6))
                        .clipShape(RoundedRectangle(cornerRadius: 8))
                        .padding(.horizontal)
                }
            }
            .safeAreaInset(edge: .bottom) {
                Button(action: {
                    dismiss()
                }, label: {
                    Text("Add")
                        .foregroundStyle(Color.white)
                })
                .frame(width: 200, height: 44)
                .background(Color.blue)
                .clipShape(RoundedRectangle(cornerSize: CGSize(width: 20, height: 10)))
                .padding()
            }
            .navigationTitle("Add Name")
            .navigationBarTitleDisplayMode(.inline)
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.75) {
                    isFocused = true
                }
            }
        }
    }
}

方案3：手动控制焦点动画 #

将焦点设置包裹在withAnimation中，让焦点变化与键盘动画同步，减少布局冲突：

.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.75) {
        withAnimation {
            isFocused = true
        }
    }
}

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