SwiftUI中ScrollViewReader含图片消息时无法滚动至末尾

我正在开发一款SwiftUI聊天应用，期望聊天视图在出现时和新增消息时自动滚动到最后一条消息。纯文本消息的滚动功能正常，但当聊天消息包含图片时，就无法滚动到最后一条消息。

FirebaseManager中的代码 #

struct UserData: Identifiable {
    var id = UUID()
    var username: String
    var profileImageURL: URL?
    var firstName: String
}

struct Message: Identifiable, Equatable, Hashable {
    var id = UUID()
    var text: String
    var senderID: String
    var recipientUsername: String
    var timestamp: Date // 用于按时间顺序排列消息
    var imageURL: URL?
    
    var timeAgo: String {
        let formatter = RelativeDateTimeFormatter()
        formatter.unitsStyle = .abbreviated
        return formatter.localizedString(for: timestamp, relativeTo: Date())
    }
}

ChatLogViewModel中的代码 #

class ChatLogViewModel: ObservableObject {
    
    @Published var messages: [Message] = []
    
    func fetchMessages() {
            firebaseManager.fetchMessages { messages in
                DispatchQueue.main.async {
                    self.messages = messages
                }
            }
        }
}

MessageView中的代码 #

import SwiftUI

struct MessageView: View {
    
    let message: Message
    let isCurrentUser: Bool

    var body: some View {
        VStack(alignment: isCurrentUser ? .trailing : .leading) {
            if let imageURL = message.imageURL {
                AsyncImage(url: imageURL) { phase in
                    switch phase {
                    case .empty:
                        ProgressView()
                    case .success(let image):
                        image
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(maxWidth: 200, maxHeight: 200)
                            .cornerRadius(10)
                    case .failure:
                        Text("Failed to load image")
                    @unknown default:
                        EmptyView()
                    }
                }
            }
            if !message.text.isEmpty {
                Text(message.text)
                    .foregroundColor(isCurrentUser ? .white : .black)
                    .padding()
                    .background(isCurrentUser ? Color.blue : Color.white)
                    .cornerRadius(10)
                    .overlay(
                        MessageOverlay(isCurrentUser: isCurrentUser)
                    )
            }
        }
    }
}

struct MessageOverlay: View {
    let isCurrentUser: Bool

    var body: some View {
        Image(systemName: "arrowtriangle.down.fill")
            .font(.title)
            .rotationEffect(.degrees(isCurrentUser ? -45 : 45))
            .offset(x: isCurrentUser ? 10 : -10, y: 10)
            .foregroundColor(isCurrentUser ? Color.blue : Color.white)
    }
}

MessageRow中的代码 #

import SwiftUI

struct MessageRow: View {
    let message: Message
    let isCurrentUser: Bool

    var body: some View {
        HStack {
            if isCurrentUser {
                Spacer()
                MessageView(message: message, isCurrentUser: isCurrentUser)
            } else {
                MessageView(message: message, isCurrentUser: isCurrentUser)
                Spacer()
            }
        }
    }
}

ChatLogView中的代码 #

import SwiftUI

struct ChatLogView: View {
    
    let user: UserData
    
    @StateObject var chatLogViewModel = ChatLogViewModel()
    
    var firebaseManager: FirebaseManager
    
    var body: some View {
        VStack {
            ScrollView {
                ScrollViewReader { scrollViewProxy in
                    VStack {
                        ForEach(chatLogViewModel.messages) { message in
                            MessageRow(message: message, isCurrentUser: message.senderID == firebaseManager.currentUserUID)
                                .padding(.horizontal)
                                .padding(.top, 8)
                        }
                        HStack { Spacer() }
                            .id("lastMessage")
                    }
                    .onAppear {
                        print("Chat view appeared, scrolling to last message")
                        scrollViewProxy.scrollTo("lastMessage", anchor: .bottom)
                    }
                    .onChange(of: chatLogViewModel.messages) { _ in
                        print("Messages changed, scrolling to last message")
                        withAnimation(.easeOut(duration: 0.5)) {
                            scrollViewProxy.scrollTo("lastMessage", anchor: .bottom)
                        }
                    }
                }
            }
        }
        .background(Color.gray.opacity(0.2))
        .navigationTitle(user.username)
        .navigationBarTitleDisplayMode(.inline)
        .toolbar(.hidden, for: .tabBar)
        ChatBarComponent(chatLogViewModel: chatLogViewModel, user: user)
    }
}

进入聊天时终端打印内容 #

Chat view appeared, scrolling to last message
Messages changed, scrolling to last message

已尝试的解决方法 #

• 尝试通过.id(message.id)确保每条消息都有唯一ID
• 使用defaultScrollAnchor()修饰符并设置初始锚点为.bottom

解决建议 #

问题核心是AsyncImage异步加载特性：触发滚动时图片尚未加载完成，此时视图高度是占位ProgressView的高度；等图片加载完成后视图高度增加，但滚动操作已经执行完毕，导致无法滚动到真正的底部。

方案1：给AsyncImage占位视图设置固定高度 #

让占位视图的高度和图片最终显示高度一致，确保滚动时的视图高度与加载完成后匹配：

AsyncImage(url: imageURL) { phase in
    switch phase {
    case .empty:
        ProgressView()
            .frame(maxWidth: 200, maxHeight: 200) // 新增固定高度
    case .success(let image):
        image
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: 200, maxHeight: 200)
            .cornerRadius(10)
    case .failure:
        Text("Failed to load image")
            .frame(maxWidth: 200, maxHeight: 200) // 同样设置高度
    @unknown default:
        EmptyView()
    }
}

方案2：监听图片加载完成后重新触发滚动 #

通过ViewModel的状态信号，在图片加载完成后再次触发滚动：

1. 修改ChatLogViewModel添加滚动触发信号：

class ChatLogViewModel: ObservableObject {
    @Published var messages: [Message] = []
    @Published var triggerScroll: Bool = false // 新增滚动触发信号
    
    func fetchMessages() {
        firebaseManager.fetchMessages { messages in
            DispatchQueue.main.async {
                self.messages = messages
            }
        }
    }
    
    // 触发滚动的方法
    func scrollToBottom() {
        triggerScroll.toggle()
    }
}

2. 在MessageView中传入ViewModel，图片加载成功时触发滚动：

struct MessageView: View {
    let message: Message
    let isCurrentUser: Bool
    @ObservedObject var viewModel: ChatLogViewModel // 传入ViewModel

    var body: some View {
        VStack(alignment: isCurrentUser ? .trailing : .leading) {
            if let imageURL = message.imageURL {
                AsyncImage(url: imageURL) { phase in
                    switch phase {
                    case .empty:
                        ProgressView()
                    case .success(let image):
                        image
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(maxWidth: 200, maxHeight: 200)
                            .cornerRadius(10)
                            .onAppear {
                                // 图片加载完成后触发滚动
                                viewModel.scrollToBottom()
                            }
                    case .failure:
                        Text("Failed to load image")
                    @unknown default:
                        EmptyView()
                    }
                }
            }
            // 原文本消息代码不变
        }
    }
}

3. 在ChatLogView中监听滚动触发信号：

struct ChatLogView: View {
    // 原有属性不变
    
    var body: some View {
        VStack {
            ScrollView {
                ScrollViewReader { scrollViewProxy in
                    VStack {
                        ForEach(chatLogViewModel.messages) { message in
                            MessageRow(message: message, isCurrentUser: message.senderID == firebaseManager.currentUserUID)
                                .padding(.horizontal)
                                .padding(.top, 8)
                                .environmentObject(chatLogViewModel) // 传入ViewModel
                        }
                        HStack { Spacer() }
                            .id("lastMessage")
                    }
                    .onAppear {
                        scrollViewProxy.scrollTo("lastMessage", anchor: .bottom)
                    }
                    .onChange(of: chatLogViewModel.messages) { _ in
                        withAnimation(.easeOut(duration: 0.5)) {
                            scrollViewProxy.scrollTo("lastMessage", anchor: .bottom)
                        }
                    }
                    .onChange(of: chatLogViewModel.triggerScroll) { _ in // 监听滚动信号
                        withAnimation(.easeOut(duration: 0.5)) {
                            scrollViewProxy.scrollTo("lastMessage", anchor: .bottom)
                        }
                    }
                }
            }
            // 原ChatBarComponent代码不变
        }
        // 原修饰符不变
    }
}

方案3：监听ScrollView内容尺寸变化（底层API） #

使用Introspect库获取底层UIScrollView，监听内容尺寸变化自动滚动：

1. 添加Introspect依赖后，修改ChatLogView：

import Introspect

struct ChatLogView: View {
    // 原有属性不变
    
    var body: some View {
        VStack {
            ScrollView {
                // 原VStack内容不变
            }
            .introspectScrollView { scrollView in
                scrollView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
            }
            .onDisappear {
                UIScrollView.removeObserver(self, forKeyPath: "contentSize")
            }
            // 原ChatBarComponent代码不变
        }
        // 原修饰符不变
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "contentSize", let scrollView = object as? UIScrollView {
            let bottomOffset = CGPoint(x: 0, y: scrollView.contentSize.height - scrollView.bounds.size.height + scrollView.contentInset.bottom)
            scrollView.setContentOffset(bottomOffset, animated: true)
        }
    }
}

注意：需在视图消失时移除观察者，避免内存泄漏。

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