如何实现SwiftUI中VStack元素从底部向上填充排列

核心实现思路 #

• ScrollView默认会将内部内容靠顶部布局，给内容容器设置maxHeight: .infinity撑满滚动区域的全部可用高度，再通过alignment: .bottom参数将内容整体对齐到容器底边，即可实现内容贴底效果
• 要实现「首个添加的元素固定在最底部、后续新增元素依次排列在已有元素上方」的效果，只需对数据源反转后渲染即可，不需要修改原有的元素追加逻辑
• 外层HStack需要显式设置顶部对齐，避免按钮被ScrollView高度拉伸错位

可直接运行的修正代码 #

import SwiftUI

struct BottomUpLayoutView: View {
    @State var items: [Int] = [0]
    
    var body: some View {
        HStack(alignment: .top) {
            Button(action: {
                items.append(items.count + 1)
            }){
                Text("Add")
            }
            
            ScrollView {
                VStack(spacing:5) {
                    // 反转数组渲染，匹配从下往上堆叠的视觉顺序
                    ForEach(items.reversed(), id: \.self) { item in
                        Text(String(item))
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
            }
            .frame(maxWidth: .infinity)
        }
    }
}

效果说明 #

• 初始状态下，第一个添加的元素会固定贴在ScrollView区域的底部
• 每次点击Add按钮新增元素时，新元素会排列在已有元素的上方，视觉从上到下的顺序为最新添加的元素到最早添加的元素，符合要求的2、1显示顺序
• 当元素总高度超过ScrollView的可用高度时，会自动启用滚动，布局不会出现错位

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