SwiftUI问题：直接用Image与通过UIImage加载SF Symbol的变形差异

问题复现代码 #

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      VStack {
        Text("Proportional")
        Image(systemName: "bookmark")
      }

      VStack {
        Text("Skewed")
        Image(uiImage: UIImage(systemName: "bookmark")!)
      }
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

问题描述 #

直接用Image(systemName:)创建的SF Symbol显示比例正常，但通过UIImage(systemName:)转成SwiftUI的Image后，图标会出现水平拉伸。尝试.aspectRatio()、.resizable()、.scaledToFit()等常规修饰符均无法解决。

可行修复方案 #

方案1：指定UIImage符号配置 #

创建UIImage时传入SymbolConfiguration，明确符号的渲染参数，避免SwiftUI自动拉伸：

Image(uiImage: UIImage(systemName: "bookmark", withConfiguration: UIImage.SymbolConfiguration(pointSize: 16, weight: .regular))!)

该配置会锁定符号的尺寸和权重，确保渲染比例正确。

方案2：使用.fixedSize()锁定尺寸 #

给通过UIImage创建的Image添加.fixedSize()修饰符，强制保持原始图标尺寸，不随父视图拉伸：

Image(uiImage: UIImage(systemName: "bookmark")!)
    .fixedSize()

若需要调整大小，可搭配.scaleEffect()按比例缩放：

Image(uiImage: UIImage(systemName: "bookmark")!)
    .fixedSize()
    .scaleEffect(1.5) // 按需调整缩放比例

方案3：用UIViewRepresentable包装UIImageView #

通过UIImageView承载SF Symbol，再包装成SwiftUI视图，完全控制渲染逻辑：

struct SystemImageView: UIViewRepresentable {
    let systemName: String
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit // 确保比例正确
        imageView.image = UIImage(systemName: systemName)
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {}
}

// 使用示例
SystemImageView(systemName: "bookmark")

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