为什么将 SF 符号放入 UIImage 中，然后放入 SwiftUI Image View 中会导致图像模糊？

Question

我正在尝试编写一个需要 UIImage 的公共初始化，但我想允许由照片（或以其他方式绘制）制作的正常的实际 UIImage 或使用 SF 符号，但我很困惑为什么 SF符号模糊。我缺少什么？

这是我得到的代码：

struct TempUIImageView: View {

    var defaultImage: UIImage = UIImage(systemName: "globe")!

    var defaultImageString: String = "globe"

    var body: some View {
        VStack  {
            Image(uiImage: defaultImage)
                .resizable()
                .scaledToFill()
                .aspectRatio(contentMode: .fit)
            Image(systemName: defaultImageString)
                .resizable()
                .scaledToFill()
                .aspectRatio(contentMode: .fit)
        }
        .padding()
    }
}

我希望在此使用一个解决方案：

@State private var displayedImage: UIImage?

...

private var displayImage: some View {
    Image(uiImage: displayedImage!)
        .resizable()
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .scaledToFill()
        .aspectRatio(contentMode: .fit)
        .clipShape(Circle())
        .shadow(radius: 4)
}

但 displayedImage 可以是 UIImage 或 SF Symbol。

（强制解包在其他代码中处理，但这无论如何都是初步代码）

Answer 1

当您使用Image(systemName:)系统时，系统会使用矢量图形绘制到屏幕上，从而产生清晰、不模糊的渲染效果。

然而，，UIImage包括，它似乎UIImage(systemName:)是一个具有设定分辨率的位图图像。如果将其放大（就像在第二个代码块中所做的那样），您会变得模糊，因为您没有获得矢量图形的好处。

使用如下所示的模式将允许您有条件地显示Image(uiImage:)orImage(systemName:)并仍然为每个使用相同的修饰符集：

struct ContentView: View {
    @State var displayedImage : UIImage?
    
    var imageToDisplay: Image {
        if let displayedImage = displayedImage {
            return Image(uiImage: displayedImage)
        } else {
            return Image(systemName: "camera.circle")
        }
    }
    
    var body: some View {
        imageToDisplay
            .resizable()
            .scaledToFill()
            .aspectRatio(contentMode: .fit)
            .frame(width: 400, height: 400)
    }
}