SwiftUI中如何实现UIImageView contentMode = .center的居中显示效果？

问题原因 #

你代码中的.resizable()修饰符是图片被拉伸的核心原因：该修饰符会让图片具备缩放能力，默认会撑满所有可用布局空间，所以后续设置36x36的frame时，图片会被直接缩放到对应尺寸。

实现方案 #

你可以完全仅通过Image组件实现需求，不需要额外嵌套容器，只需移除.resizable()并调整修饰符顺序即可：

Image("pool_icn")
    .frame(width: 36, height: 36, alignment: .center)
    .background(Color.blue)
    .cornerRadius(16)

原理说明 #

SwiftUI修饰符为顺序敏感：

• 不加.resizable()时，Image本身的渲染尺寸固定为图片原始尺寸
• 先添加frame修饰符，是将Image的布局占位空间设置为36x36，内部图片按center对齐在这个空间内，不会改变图片本身的渲染大小
• 后续的背景、圆角修饰符都是作用在36x36的布局空间上，符合你要的带背景圆角的展示需求

如果你有其他扩展需求（比如要在该区域内添加更多元素），也可以选择嵌套ZStack容器实现，效果完全一致：

ZStack(alignment: .center) {
    Color.blue
        .cornerRadius(16)
    Image("pool_icn")
}
.frame(width: 36, height: 36)

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