SwiftUI聊天界面滚动与键盘交互优化问题求助

我正在基于SwiftUI+SwiftData开发一款ChatGPT对话应用（部署目标iOS 17.0），需要实现类似WhatsApp或苹果Messages的流畅滚动与键盘交互体验，具体需求：

• 打开ChatView时自动滚动至最后一条消息底部
• 聚焦TextField弹出键盘时，内容立即上移无延迟
• 添加新消息（用户输入或OpenAI API流式返回）时，视图平滑滚动以显示新内容
• 发送消息后保持键盘聚焦，支持快速回复

此前尝试使用scrollTo、Scroll Targets、FocusState等方案，但存在延迟、动画不稳定等问题，以下是优化后的完整实现代码：

import SwiftUI

struct Message: Codable, Identifiable {
    var id: String
    var body: String
}

struct DetailView: View {
    @State private var text: String = ""
    @State private var messages: [Message] = []
    @FocusState private var isTextFieldFocused: Bool
    // iOS17 新增滚动位置绑定，替代手动scrollTo调用
    @State private var scrollPosition: String?
    
    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                LazyVStack(spacing: 12) {
                    ForEach(messages) { message in
                        MessageBubble(message: message)
                            .id(message.id)
                    }
                }
                .padding(.horizontal)
                .padding(.bottom, 8)
            }
            // 绑定滚动位置，自动跟踪最后一条消息
            .scrollPosition(id: $scrollPosition, anchor: .bottom)
            .scrollDismissesKeyboard(.interactively)
            
            // 输入栏
            HStack(spacing: 8) {
                TextField("New message", text: $text, axis: .vertical)
                    .font(.system(size: 14))
                    .lineLimit(1...10)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 10)
                    .background(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.secondary.opacity(0.3), lineWidth: 1)
                    )
                    .focused($isTextFieldFocused)
                
                Button(action: sendMessage) {
                    Image(systemName: "arrow.up.circle.fill")
                        .font(.system(size: 30))
                        .foregroundColor(.blue)
                }
                .disabled(text.trimmingCharacters(in: .whitespaces).isEmpty)
            }
            .padding(.horizontal)
            .padding(.bottom, 8)
            .padding(.top, 4)
        }
        .navigationTitle("Messages")
        .navigationBarTitleDisplayMode(.inline)
        .onAppear {
            // 无消息时自动聚焦输入框
            if messages.isEmpty {
                isTextFieldFocused = true
            }
            // 滚动到最后一条消息
            scrollPosition = messages.last?.id
        }
        .onChange(of: messages) { _, newMessages in
            // 消息更新时自动滚动到最新内容
            withAnimation(.easeOut(duration: 0.2)) {
                scrollPosition = newMessages.last?.id
            }
        }
        .onChange(of: isTextFieldFocused) { focused in
            if focused {
                // 聚焦时确保最后一条消息不被键盘遮挡
                scrollPosition = messages.last?.id
            }
        }
    }
    
    private func sendMessage() {
        guard !text.trimmingCharacters(in: .whitespaces).isEmpty else { return }
        
        let newMessage = Message(id: UUID().uuidString, body: text)
        messages.append(newMessage)
        
        // 清空输入框并保持键盘聚焦
        text = ""
        DispatchQueue.main.async {
            isTextFieldFocused = true
        }
    }
}

// 独立消息气泡视图，优化代码结构
struct MessageBubble: View {
    let message: Message
    
    var body: some View {
        HStack(alignment: .bottom) {
            Image(systemName: "person.circle")
                .foregroundColor(.secondary)
                .font(.system(size: 24))
            
            VStack(alignment: .leading, spacing: 4) {
                Text(message.body)
                    .font(.system(size: 14))
                    .padding(12)
                    .background(Color(.systemGray5))
                    .cornerRadius(16, corners: [.topRight, .bottomLeft, .bottomRight])
            }
            
            Spacer()
        }
    }
}

// 扩展支持自定义圆角位置
extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape(RoundedCorner(radius: radius, corners: corners))
    }
}

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

核心优化要点 #

1. 自动滚动至底部（打开视图/消息更新时） #

• 使用iOS17新增的scrollPosition(id:anchor:)修饰器，替代手动调用scrollTo，系统自动跟踪绑定ID并滚动到对应位置，彻底消除手动调度延迟问题
• 在onAppear和onChange(of: messages)中设置scrollPosition为最后一条消息ID，配合withAnimation实现原生级平滑滚动

2. 键盘弹出无延迟上移 #

• 确保VStack布局紧凑，让ScrollView占据剩余空间，SwiftUI自动处理键盘弹出时的布局调整
• 移除原代码中的DispatchQueue.main.asyncAfter延迟，在isTextFieldFocused变化时同步设置scrollPosition，确保内容立即上移

3. 流式消息更新的平滑滚动 #

• 当OpenAI API流式返回消息时，只需更新messages数组，onChange(of: messages)会自动触发滚动到最新消息
• 用withAnimation(.easeOut)控制滚动动画速度，匹配原生Messages的流畅感

4. 发送后保持键盘聚焦 #

• 在sendMessage方法中，清空输入框后通过DispatchQueue.main.async重新设置isTextFieldFocused = true，避免视图更新导致的聚焦失效
• 给发送按钮添加disabled状态，防止空消息发送

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