SwiftUI实现聊天消息默认显示在ScrollView底部的问题

我正在开发SwiftUI聊天界面，希望消息像Telegram那样默认显示在屏幕底部，但所有尝试的方案都让消息渲染在顶部，包括官方文档和ChatGPT的方法都没解决。

尝试过的方案 #

1. 使用defaultScrollAnchor(_:)修饰符 #

给ScrollView添加该修饰符，无论传入.top、.center还是.bottom都无效果，静态和动态列表场景均测试过，代码如下：

ScrollView(showsIndicators: false) {
    LazyVStack {
        ForEach(viewModel.location.chat) { chat in
            Text(chat.message)
                .id(chat.id)
        }
    }
    .frame(maxWidth: .infinity)
}

2. 使用ScrollViewReader配合scrollTo(_:anchor:) #

尝试在onAppear和onChange回调中调用滚动到底部的方法，同样无效，Spacer()也未起作用，实现代码如下：

ScrollViewReader { proxy in
    ScrollView(showsIndicators: false) {
        LazyVStack {
            ForEach(viewModel.location.chat) { chat in
                Text(chat.message)
                    .id(chat.id)
            }
        }
        .frame(maxWidth: .infinity)
    }
    .onAppear {
        scrollToBottom(proxy: proxy)
    }
    .onChange(of: viewModel.location.chat) {
        scrollToBottom(proxy: proxy)
    }
}

对应的滚动函数：

private func scrollToBottom(proxy: ScrollViewProxy) {
    DispatchQueue.main.async {
        if let lastMessage = viewModel.location.chat.last {
            proxy.scrollTo(lastMessage.id, anchor: .bottom)
        }
    }
}

剥离业务逻辑的完整代码 #

struct ContentView: View {
    @StateObject var viewModel: ViewModel
    
    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView(showsIndicators: false) {
                    LazyVStack {
                        ForEach(viewModel.location.chat) { chat in
                            Text(chat.message)
                                .id(chat.id)
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
                .onAppear {
                    scrollToBottom(proxy: proxy)
                }
                .onChange(of: viewModel.location.chat) {
                    scrollToBottom(proxy: proxy)
                }
            }
            HStack {
                TextField("Message", text: $viewModel.currentMessage)
                    .frame(height: 40)
                    .padding([.leading, .trailing], 12)
                    .overlay {
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.black.opacity(0.4))
                    }
                Button {
                    viewModel.sendMessage()
                } label: {
                    Image(systemName: "paperplane.fill")
                        .foregroundStyle(Color.white)
                        .frame(width: 40, height: 40)
                        .background(Color.accentColor)
                        .clipShape(Circle())
                }
            }
            .padding([.leading, .trailing, .bottom], 12)
        }
    }
    
    private func scrollToBottom(proxy: ScrollViewProxy) {
        DispatchQueue.main.async {
            if let lastMessage = viewModel.location.chat.last {
                proxy.scrollTo(lastMessage.id, anchor: .bottom)
            }
        }
    }
}

#Preview {
    ContentView(viewModel: ViewModel(location: Location(name: "Test locaiton")))
}

struct Location: Identifiable {
    var id = UUID()
    var name: String
    var chat: [StringChatMessage]
    
    init(name: String) {
        self.name = name
        self.chat = []
    }
}

struct StringChatMessage: Identifiable, Equatable {
    var id = UUID()
    var isUser: Bool
    var message: String
}

@MainActor
class ViewModel: ObservableObject {
    @Published var location: Location
    @Published var currentMessage: String = ""
    
    init(location: Location) {
        self.location = location
    }
    
    func sendMessage() {
        guard !currentMessage.isEmpty else { return }
        location.chat.append(StringChatMessage(isUser: true, message: currentMessage))
        location.chat.append(StringChatMessage(isUser: false, message: "*reply*"))
        currentMessage = ""
    }
}

问题根源与解决方案 #

1. ScrollView未占据可用空间 #

当前ScrollView在VStack中默认仅包裹内容高度，未填满剩余屏幕空间，导致无法滚动到底部。需给ScrollView添加frame(maxHeight: .infinity)修饰符，让它占满VStack中的剩余高度。

2. ViewModel中结构体属性修改未触发更新 #

Location是值类型（结构体），直接修改location.chat不会触发@Published var location的变更通知，因为结构体属性修改不会改变实例本身的引用。需创建新的Location实例并重新赋值，才能触发onChange回调。

3. 让消息默认贴底部 #

在LazyVStack最顶部添加Spacer(minLength: 0)，可让消息内容默认显示在ScrollView底部，无需额外滚动操作。

修改后的完整代码 #

struct ContentView: View {
    @StateObject var viewModel: ViewModel
    
    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView(showsIndicators: false) {
                    LazyVStack {
                        Spacer(minLength: 0) // 将消息推至底部
                        ForEach(viewModel.location.chat) { chat in
                            Text(chat.message)
                                .id(chat.id)
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
                .frame(maxHeight: .infinity) // 让ScrollView占满剩余高度
                .onAppear {
                    scrollToBottom(proxy: proxy)
                }
                .onChange(of: viewModel.location.chat) { _, _ in
                    scrollToBottom(proxy: proxy)
                }
            }
            HStack {
                TextField("Message", text: $viewModel.currentMessage)
                    .frame(height: 40)
                    .padding([.leading, .trailing], 12)
                    .overlay {
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.black.opacity(0.4))
                    }
                Button {
                    viewModel.sendMessage()
                } label: {
                    Image(systemName: "paperplane.fill")
                        .foregroundStyle(Color.white)
                        .frame(width: 40, height: 40)
                        .background(Color.accentColor)
                        .clipShape(Circle())
                }
            }
            .padding([.leading, .trailing, .bottom], 12)
        }
    }
    
    private func scrollToBottom(proxy: ScrollViewProxy) {
        DispatchQueue.main.async {
            if let lastMessage = viewModel.location.chat.last {
                proxy.scrollTo(lastMessage.id, anchor: .bottom)
            }
        }
    }
}

#Preview {
    ContentView(viewModel: ViewModel(location: Location(name: "Test location")))
}

struct Location: Identifiable {
    var id = UUID()
    var name: String
    var chat: [StringChatMessage]
    
    init(name: String) {
        self.name = name
        self.chat = []
    }
}

struct StringChatMessage: Identifiable, Equatable {
    var id = UUID()
    var isUser: Bool
    var message: String
}

@MainActor
class ViewModel: ObservableObject {
    @Published var location: Location
    @Published var currentMessage: String = ""
    
    init(location: Location) {
        self.location = location
    }
    
    func sendMessage() {
        guard !currentMessage.isEmpty else { return }
        // 创建副本修改后重新赋值，触发Published更新
        var updatedLocation = location
        updatedLocation.chat.append(StringChatMessage(isUser: true, message: currentMessage))
        updatedLocation.chat.append(StringChatMessage(isUser: false, message: "*reply*"))
        location = updatedLocation
        currentMessage = ""
    }
}

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