SwiftUI如何让不同尺寸的URL加载图片适配固定大小的正方形frame

核心问题点 #

• 你的代码未给Image添加.resizable()修饰符，SwiftUI默认Image不可缩放，后续缩放修饰符不会生效
• 修饰符顺序错误：你先设定了frame尺寸，再添加缩放修饰符，缩放逻辑无法作用到外层容器上
• 缺少统一内边距控制，不同原始尺寸的图标缩放后留白不一致

修正后代码 #

import SwiftUI

struct ContentView: View {
    
    var websites = ["https://www.reddit.com/favicon.ico", "https://www.facebook.com/favicon.ico", "https://www.instagram.com/favicon.ico", "https://www.google.com/favicon.ico", "https://www.netflix.com/favicon.ico", "https://www.amazon.com/favicon.ico"]
    
    var body: some View {
        NavigationView {
            Form {
                ForEach(websites, id: \.self) { wbs in
                    // 替换强制解包为可选处理，避免网络异常、图标失效导致崩溃
                    if let url = URL(string: wbs), let image = try? UIImage(withContentsOfUrl: url) {
                        Image(uiImage: image)
                            .resizable() // 开启图像缩放能力
                            .scaledToFit() // 按比例适配，不裁切图标内容
                            .padding(6) // 统一内边距，可根据想要的留白大小调整数值
                            .frame(width: 40, height: 40)
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                            .overlay(RoundedRectangle(cornerRadius: 10)
                                        .strokeBorder(Color.gray, lineWidth: 1.0))
                    } else {
                        // 加载失败占位图，可自定义
                        Image(systemName: "globe")
                            .resizable()
                            .scaledToFit()
                            .padding(8)
                            .frame(width: 40, height: 40)
                            .foregroundColor(.gray)
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                            .overlay(RoundedRectangle(cornerRadius: 10)
                                        .strokeBorder(Color.gray, lineWidth: 1.0))
                    }
                }
            }
        }
    }
}

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

extension UIImage {
    convenience init?(withContentsOfUrl url: URL) throws {
        let imageData = try Data(contentsOf: url)
        self.init(data: imageData)
    }
}

补充说明 #

• .padding(6)的数值可以根据需求调整，数值越大图标越小，四周留白越多
• 如果你想要图标完全填充满40x40容器、允许裁切边缘，把.scaledToFit()替换为.scaledToFill()即可

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