SwiftUI ScrollView添加消息时滚动到底部动画未正常工作求助

问题原因 #

• 重复触发滚动指令：你把onChange(of: chats.count)放在了ForEach的每个消息视图内部，每次消息数量变化时，所有已存在的消息视图都会执行一次scrollTo调用，多次重复的滚动指令会导致动画冲突、卡顿。
• 滚动目标不匹配：你给每个消息设置的id是message本身（id: \.self），但调用scrollTo时传入的是chats.indices.last（索引值），两者类型不匹配，ScrollViewReader无法准确找到目标视图，导致动画失效或异常。

修复方案 #

以下是调整后的完整代码，包含关键修复和测试用的消息发送功能：

import SwiftUI

struct ContentView: View {
    @State private var chats = ["Message 1", "Message 2", "Message 3"]
    @State private var newMessageText = ""

    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView {
                    LazyVStack {
                        ForEach(chats, id: \.self) { message in
                            Text(message)
                                .padding()
                                .id(message) // 保持id与消息内容一致
                        }
                    }
                }
                .onChange(of: chats.count) { _ in
                    // 将onChange移到ScrollView层级，只触发一次滚动
                    guard let lastMessage = chats.last else { return }
                    withAnimation(.easeInOut(duration: 0.5)) {
                        proxy.scrollTo(lastMessage, anchor: .bottom)
                    }
                }

                // 模拟消息输入发送栏
                HStack {
                    TextField("输入消息...", text: $newMessageText)
                        .textFieldStyle(.roundedBorder)
                    Button("发送") {
                        if !newMessageText.isEmpty {
                            chats.append(newMessageText)
                            newMessageText = ""
                        }
                    }
                }
                .padding()
            }
        }
    }
}

关键改动说明 #

1. 调整onChange位置：将滚动触发逻辑移到ScrollView层级，确保每次消息数量变化时只执行一次滚动操作，避免重复指令冲突。
2. 匹配滚动目标ID：滚动目标改为chats.last，与消息视图的id（message）完全匹配，让ScrollViewReader能精准定位到最新消息。
3. 性能优化（可选）：用LazyVStack替代默认VStack，在消息数量较多时能延迟加载视图，提升整体性能。

内容的提问来源于stack exchange，提问作者Luka Šalipur