SwiftUI中如何设置图片自适应宽高并限制最大高度？

AI 小北

2026-6-26

SwiftUI 图片适配问题解决方案

需求与问题

需求：图片始终占满可用最大宽度，同时最大高度限制为500；仅当图片本身比例能填满500高度时，才使用该高度。
当前问题：

宽图（比例较宽）未填满500高度，但框架仍保留500高度空间，导致上下文本与图片间距过大
高图（比例较高）未占满可用宽度，布局不符合预期

修改后的代码

import SwiftUI
import Kingfisher

struct SwiftUIView: View {
    var body: some View {
        VStack {
            Text("hello")
            KFImage(URL(string: "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg"))
                .resizable()
                .scaledToFill() // 优先填满可用宽度
                .frame(maxWidth: .infinity, maxHeight: 500) // 限制最大宽高，宽度占满可用空间
                .cornerRadius(15) // 替代clipShape，直接设置圆角
                .clipped() // 裁剪超出frame的部分
            Text("hello")
        }
        .padding(.horizontal, 20)
    }
}

// 高图测试链接
// "https://media.macphun.com/img/uploads/customer/how-to/608/15542038745ca344e267fb80.28757312.jpg?q=85&w=1340"

#Preview {
    SwiftUIView()
}

关键修改说明

替换适配模式：将scaledToFit()改为scaledToFill()，确保图片优先填充可用宽度，而非优先适应高度。
调整frame逻辑：设置frame(maxWidth: .infinity, maxHeight: 500)，让图片在「占满宽度+高度不超过500」的范围内自适应，不会强制保留500高度的空白空间。
简化圆角实现：用cornerRadius替代clipShape(RoundedRectangle(...))，效果一致且代码更简洁，配合clipped()裁剪超出frame的图片部分。