SwiftUI中ScrollView内容较小时占满高度的解决方法

要实现你需要的效果（类似Android的weight(1f, fill = false)），核心是让ScrollView优先适配自身内容高度，仅当内容超过可用空间时才填充剩余垂直空间并启用滚动。具体解决方案如下：

关键修改 #

给ScrollView添加frame(maxHeight: .infinity, alignment: .top)修饰符：

• maxHeight: .infinity：允许ScrollView在内容高度超过可用空间时，占用所有剩余垂直空间
• alignment: .top：确保ScrollView在内容高度不足时，顶部对齐，不会被强制拉伸至满高度

修改后的完整代码 #

struct ContentTestView: View {
    var body: some View {
        VStack {
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0..<6) { index in
                        Text("Item \(index)")
                            .padding()
                            .background(Color.gray.opacity(0.3))
                            .cornerRadius(8)
                            .padding(.bottom, 4)
                    }
                }
                .frame(maxWidth: .infinity) // 保持宽度填充
            }
            .background(.red)
            .frame(maxHeight: .infinity, alignment: .top) // 核心修改
            
            Text("Just right below the ScrollView")
            
            Spacer() // 内容不足时，此处填充剩余空间
            
            Text("Bottom")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentTestView()
    }
}

效果说明 #

• 内容较少时：ScrollView会收缩至内容实际高度，下方的文本和底部按钮保持正常位置，Spacer填充剩余空白
• 内容较多时：ScrollView会占用所有剩余垂直空间（除了下方固定的文本和按钮），内容超出ScrollView高度时自动启用滚动

原问题原因 #

未添加高度限制时，VStack中的Spacer会将所有剩余空间分配给ScrollView，导致即使内容很少，ScrollView也会被强制拉伸至满高度，挤压下方视图。

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