SwiftUI ScrollView：调整视图时保持底部锚定的实现方案

问题核心 #

当前通过ScrollViewReader滚动到消息底部的空锚点，消息数量变化时滚动正常，但多行输入框展开时会覆盖最后一条消息——原因是VStack中ScrollView的高度未随输入框高度动态调整，且消息内容默认从顶部排列，没有始终锚定容器底部。

无需反转的解决方案 #

通过调整布局结构，让ScrollView占据剩余空间，同时强制消息内容始终对齐容器底部，具体修改如下：

修改后的完整代码 #

VStack(spacing: 0) {
    ScrollViewReader { scrollViewProxy in
        ScrollView {
            // 让消息容器始终对齐底部，并填满ScrollView高度
            VStack(spacing: 8) {
                ForEach(messagesManager.messages, id: \.id) { message in
                    MessageBubble(message: message)
                        .id(message.id)
                }
                
                // 保留空锚点用于滚动定位
                Spacer(minLength: 10)
                    .id(ChatView.emptyScrollToString)
            }
            .frame(maxHeight: .infinity, alignment: .bottom) // 关键：内容锚定底部
            .padding(.horizontal)
        }
        .frame(maxHeight: .infinity) // 让ScrollView占据输入框以外的所有空间
        .onReceive(messagesManager.$count) { _ in
            withAnimation(.easeOut(duration: 0.3)) {
                scrollViewProxy.scrollTo(ChatView.emptyScrollToString, anchor: .bottom)
            }
        }
        .onAppear {
            withAnimation(.easeOut(duration: 0.3)) {
                scrollViewProxy.scrollTo(ChatView.emptyScrollToString, anchor: .bottom)
            }
        }
    }
    
    // 输入框区域，高度变化时自动挤压上方ScrollView空间
    MessageField()
        .padding(.horizontal)
        .padding(.bottom, 8)
}

关键修改点 #

• 给消息列表的VStack添加frame(maxHeight: .infinity, alignment: .bottom)：强制消息内容始终靠容器底部排列，而非从顶部向下堆砌。
• 给ScrollView设置frame(maxHeight: .infinity)：使其占据VStack中除输入框外的全部剩余空间，输入框高度变化时，ScrollView会自动调整自身高度，避免消息被覆盖。
• 调整VStack(spacing: 0)去掉默认间距，让布局更贴合聊天应用的视觉逻辑。

额外优化建议 #

• 若要让输入框高度变化更平滑，可给MessageField添加animation(.easeOut)，让ScrollView的高度调整过渡更自然。
• 保留原有scrollTo逻辑，确保新消息到来时依然自动滚动到底部。

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