SwiftUI - 如何使来自不同大小的 URL 的图像适合框架？答案

【问题标题】：SwiftUI - How to make images from URLs with different sizes fit the frame?SwiftUI - 如何使来自不同大小的 URL 的图像适合框架？
【发布时间】：2021-11-08 14:00:20
【问题描述】：

我正在尝试从互联网上下载一系列网站图标，然后将其插入方形框架中。但是，它们具有不同的大小，并且使用 scaledToFit() 或 scaledToFill() 似乎也无法解决问题。

代码如下：

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
                    Image(uiImage: try! UIImage(withContentsOfUrl: URL(string: wbs)!)!)
                        .frame(width: 40, height: 40, alignment: .center)
                        .scaledToFit()
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .overlay(RoundedRectangle(cornerRadius: 10)
                                    .strokeBorder(Color.gray, lineWidth: 1.0)
                                    .foregroundColor(.clear))
                }
            }
        }
    }
}

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)
    }
}

我想要实现的是所有图标都以相同的方式填充框架。例如，在我附上的截图中，Reddit 和 Instagram 的 favicon 看起来不错，而 Facebook 太小，而 Amazon 或 Netflix 太大。

谢谢大家！

【问题讨论】：

添加可调整大小的修饰符
如前所述，在.frame(...) 之前使用.resizable()，不要尝试！并在 Image(....) 中强制展开，这只是自找麻烦。
@loremipsum 谢谢！
@workingdog 谢谢！是的，我仅为此示例添加了强制展开，以避免粘贴太多与我的问题无关的代码！不过还是谢谢你指出来，这可能是一个有用的提示！

标签： image url swiftui uiimage favicon

【解决方案1】：

添加

.resizable()

图像修饰符

【讨论】：