SwiftUI图片布局需求：满宽显示、按需裁剪、不足时底部对齐

修正后的代码 #

struct ContentView: View {
    let items = ["A", "B", "C", "D", "E", "F", "G"]
    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            Spacer(minLength: 0)
            GeometryReader { geo in
                Image("image-300x1200")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geo.size.width)
                    .clipped()
                    .frame(height: geo.size.height, alignment: .bottom)
            }
            Button("Action") {}
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

关键调整说明 #

• 外层VStack全屏约束：.frame(maxWidth: .infinity, maxHeight: .infinity)让整个布局占满屏幕，确保内部组件能正确获取可用空间。
• Spacer最小化：Spacer(minLength: 0)避免额外占用空间，保证图片区域的可用高度是顶部文本和底部按钮之外的剩余空间。
• 保持宽高比并填满宽度：.scaledToFill()自动按图片原始宽高比缩放，优先填满宽度，解决原代码拉伸变形的问题。
• 裁剪溢出部分：.clipped()将超出GeometryReader容器的图片部分裁剪掉，避免图片挤压上下视图或超出屏幕。
• 高度不足时贴底对齐：.frame(height: geo.size.height, alignment: .bottom)确保图片高度小于可用空间时，自动贴合底部按钮。

可选优化（固定宽高比场景） #

如果图片宽高比固定（比如示例中的300x1200，宽高比1:4），可以用.aspectRatio(1/4, contentMode: .fill)替代.scaledToFill()，效果一致，适合已知图片比例的场景。

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