SwiftUI：接收后端消息后自动滚动至消息开头问题求助

后端返回消息后，应用需要自动滚动到这条新消息的开头位置，但目前无法实现该功能。我试过多个解决方案均无效，以下是我的代码：

struct ContentView: View {
    @State private var inputText = ""
    @State private var messages: [Message] = []
    @State private var showThumbsDownSheet = false
    @State private var feedbackText = ""
    @State private var showThanksForFeedback = false

    
    var body: some View {
        VStack {
            NavigationView {
                ScrollViewReader { scrollView in
                    List {
                        ForEach(messages, id: \.id) { message in
                            
                            Text(message.text)
                            if !message.isFromUser && message.isReplyFromBackEnd {
                                HStack {
                                    ThumbsUpButton(message: message)
                                    Spacer()
                                    ThumbsDownButton(message: message, showThumbsDownSheet: $showThumbsDownSheet, reviewText: $feedbackText)
                                }
                            }
                        }
                    }
                    .onChange(of: messages) { value in
                        scrollView.scrollTo(self.messages.count - 1)
                    }
                }
            .navigationTitle("Ask Tais")
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    Menu {
                        Button(action: { exit(0) }) {
                            Label("Quit app", systemImage: "")
                        }
                    }
                    label: {
                        Label("Add", systemImage: "ellipsis.circle")
                    }
                }
            }
        }
            .onAppear {
                self.messages.append(Message(id: UUID(), text: "Hello!", isFromUser: false, isReplyFromBackEnd: false, responseId: "0"))
                            }
            .frame(maxHeight: .infinity)
            HStack {
                TextField("What do you want to say?", text: $inputText)
                Button(action: {
                    self.messages.append(Message(id: UUID(), text: self.inputText, isFromUser: true, isReplyFromBackEnd: false, responseId:"0"))
                    sendRequest(with: self.inputText) { responseText, id in
                    self.messages.append(Message(id: UUID(), text: responseText, isFromUser: false, isReplyFromBackEnd: true, responseId: id))
                    }
                    self.inputText = ""
                }) {
                    Text("Ask Tais")
                }
            }
            .padding()
        }
    }
}

修复方案 #

你的代码有几个关键问题导致滚动失效，调整后即可解决：

1. 使用消息的唯一ID作为滚动目标
   当前用messages.count - 1（数组索引）作为滚动目标，但ScrollViewReader的scrollTo需要匹配ForEach中指定的id（即Message的UUID），索引会因数组动态变化失效，用唯一ID更可靠。

2. 指定滚动锚点到消息开头
   默认scrollTo会将目标位置滚动到视图中间，添加anchor: .top可以确保滚动到消息的开头位置。

3. 确保UI操作在主线程执行
   后端请求的回调通常在后台线程，直接修改messages后触发的滚动可能不在主线程，需要用DispatchQueue.main.async包裹UI相关操作。

修改后的完整代码：

struct ContentView: View {
    @State private var inputText = ""
    @State private var messages: [Message] = []
    @State private var showThumbsDownSheet = false
    @State private var feedbackText = ""
    @State private var showThanksForFeedback = false

    var body: some View {
        VStack {
            NavigationView {
                ScrollViewReader { scrollProxy in
                    List {
                        ForEach(messages, id: \.id) { message in
                            Text(message.text)
                            if !message.isFromUser && message.isReplyFromBackEnd {
                                HStack {
                                    ThumbsUpButton(message: message)
                                    Spacer()
                                    ThumbsDownButton(message: message, showThumbsDownSheet: $showThumbsDownSheet, reviewText: $feedbackText)
                                }
                            }
                        }
                    }
                    // 监听消息数组变化，滚动到最后一条消息的开头
                    .onChange(of: messages) { _ in
                        guard let lastMessageId = messages.last?.id else { return }
                        scrollProxy.scrollTo(lastMessageId, anchor: .top)
                    }
                }
                .navigationTitle("Ask Tais")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        Menu {
                            Button(action: { exit(0) }) {
                                Label("退出应用", systemImage: "")
                            }
                        } label: {
                            Label("更多", systemImage: "ellipsis.circle")
                        }
                    }
                }
            }
            .onAppear {
                messages.append(Message(id: UUID(), text: "Hello!", isFromUser: false, isReplyFromBackEnd: false, responseId: "0"))
            }
            .frame(maxHeight: .infinity)
            
            HStack {
                TextField("你想问什么？", text: $inputText)
                Button(action: {
                    let userMessage = Message(id: UUID(), text: inputText, isFromUser: true, isReplyFromBackEnd: false, responseId:"0")
                    messages.append(userMessage)
                    
                    sendRequest(with: inputText) { responseText, id in
                        DispatchQueue.main.async {
                            let backendMessage = Message(id: UUID(), text: responseText, isFromUser: false, isReplyFromBackEnd: true, responseId: id)
                            messages.append(backendMessage)
                        }
                    }
                    
                    inputText = ""
                }) {
                    Text("提问")
                }
            }
            .padding()
        }
    }
}

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