SwiftUI中禁用.scaledToFit()后如何防止图片拉伸变形？

核心方案 #

用.aspectRatio(contentMode: .fit)替代.scaledToFit()，既保持图片原始宽高比，又不影响手势和缩放变换的功能。.scaledToFit()本质就是.aspectRatio(contentMode: .fit)的语法糖，直接使用后者可以更灵活地配合自定义视图层级。

修改后的Image视图代码 #

Image(uiImage: scannedImage)
    .resizable()
    .aspectRatio(contentMode: .fit) // 替换注释掉的.scaledToFit()
    .border(.red, width: 2)
    .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
    .scaleEffect(scale, anchor: scaleAnchor)
    .offset(offset)
    .gesture(dragGesture)
    .gesture(magnificationGesture)
    .frame(width: geometry.size.width, height: geometry.size.height)

方案说明 #

• 注释掉.scaledToFit()后，resizable()的Image会默认拉伸填满父视图的.frame，导致变形；而.aspectRatio(contentMode: .fit)会强制图片保持原始宽高比，在父frame内居中显示，不会超出边界。
• 修饰符顺序不影响手势和缩放：scaleEffect、offset、position等变换会在图片按比例适配后应用，和原来的逻辑完全兼容，缩放、拖拽功能不受影响。

原有逻辑兼容性验证 #

你编写的fixOffsetAndScale函数中，计算originalScale的逻辑是正确的——它本质就是计算图片按比例适配屏幕的初始缩放值，和.aspectRatio(contentMode: .fit)的效果一致，因此不需要修改这个函数的逻辑，手势结束后的偏移和缩放修正功能依然正常工作。

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