SwiftUI中如何在尊重布局的前提下缩放图片？

要实现基于图片原始尺寸缩放、同时让布局正确识别缩小后尺寸的效果，你可以通过获取图片原始尺寸后动态设置frame的方式解决，避免硬编码或被父视图拉伸：

方法一：直接获取尺寸并设置frame #

先通过UIImage拿到图片的原始尺寸，再按缩放比例计算新尺寸，配合resizable()和scaledToFit()保证图片比例不变：

if let originalSize = UIImage(named: "My Image")?.size {
    Image("My Image")
        .resizable()
        .scaledToFit()
        .frame(
            width: originalSize.width * 0.25,
            height: originalSize.height * 0.25
        )
}

这样图片会按原始尺寸的25%缩放，布局时只会占据缩小后的空间，也不会被父视图拉伸。

方法二：封装成自定义Modifier复用 #

如果需要多次使用，可以封装成一个ViewModifier，简化代码：

struct ScaleImageToOriginalSize: ViewModifier {
    let scale: CGFloat
    private let imageSize: CGSize?
    
    init(scale: CGFloat, imageName: String) {
        self.scale = scale
        self.imageSize = UIImage(named: imageName)?.size
    }
    
    func body(content: Content) -> some View {
        if let size = imageSize {
            content
                .resizable()
                .scaledToFit()
                .frame(
                    width: size.width * scale,
                    height: size.height * scale
                )
        } else {
            content // 图片不存在时保持原样
        }
    }
}

// 使用方式
Image("My Image")
    .modifier(ScaleImageToOriginalSize(scale: 0.25, imageName: "My Image"))

为什么之前的方法不适用？ #

• scaleEffect(0.25)仅改变视觉渲染大小，布局系统仍会保留图片原始尺寸的空间；
• 仅用resizable()会让图片填充父视图空间，导致拉伸；
• scaledToFill/scaledToFit是基于父视图尺寸调整，而非图片原始尺寸。

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