SwiftUI TextField随键盘动画出现间隙的解决方案问询

核心实现思路 #

问题根源在于未让输入框背景完全填充底部安全区，且未同步键盘弹出/收起的动画节奏。以下是和Callsheet应用同源的实现方案：

1. 用safeAreaInset(edge: .bottom)嵌入输入框，这是SwiftUI官方适配键盘的原生方案，能自动跟随键盘高度动态调整位置。
2. 给输入框容器设置ignoresSafeArea(.all, edges: .bottom)，确保背景完全延伸至屏幕底部，键盘弹出时直接贴合背景顶部。
3. 通过@FocusState管理输入框焦点，保证焦点状态与键盘动画同步。

完整代码示例 #

import SwiftUI

struct ChatView: View {
    @State private var messages = ["Hello!", "Hi there!", "How can I help you?"]
    @State private var newMessage = ""
    @FocusState private var isInputFocused: Bool
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(messages, id: \.self) { message in
                    Text(message)
                        .padding(8)
                        .background(Color(.systemGray6))
                        .cornerRadius(12)
                }
            }
            .navigationTitle("Chat")
            // 嵌入底部输入栏
            .safeAreaInset(edge: .bottom) {
                HStack(spacing: 8) {
                    TextField("Type a message...", text: $newMessage)
                        .textFieldStyle(.roundedBorder)
                        .focused($isInputFocused)
                    
                    Button("Send") {
                        messages.append(newMessage)
                        newMessage = ""
                        isInputFocused = false
                    }
                    .buttonStyle(.borderedProminent)
                }
                .padding(.horizontal)
                .padding(.vertical, 8)
                // 关键：设置背景并忽略底部安全区，消除间隙
                .background(Color(.systemBackground))
                .ignoresSafeArea(.all, edges: .bottom)
            }
            // 点击空白处收起键盘
            .onTapGesture {
                isInputFocused = false
            }
        }
    }
}

struct ChatView_Previews: PreviewProvider {
    static var previews: some View {
        ChatView()
    }
}

关键细节说明 #

• safeAreaInset会自动监听键盘高度变化，无需手动处理UIKit键盘通知，原生适配动画节奏。
• 必须给输入框容器设置与页面背景一致的background，否则默认透明会露出下方List内容，视觉上呈现间隙。
• ignoresSafeArea(.all, edges: .bottom)让输入栏背景完全覆盖底部安全区，键盘弹出时直接贴合背景顶部，无错位。

额外优化（匹配Callsheet的流畅体验） #

如果需要键盘弹出时自动滚动到最新消息，可添加ScrollViewReader：

// 修改List部分代码
List {
    ScrollViewReader { proxy in
        ForEach(messages, id: \.self) { message in
            Text(message)
                .padding(8)
                .background(Color(.systemGray6))
                .cornerRadius(12)
                .id(message)
        }
        .onChange(of: isInputFocused) { newValue in
            if newValue {
                withAnimation {
                    proxy.scrollTo(messages.last, anchor: .bottom)
                }
            }
        }
    }
}

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