SwiftUI - 如何使来自不同大小的 URL 的图像适合框架?
SwiftUI - How to make images from URLs with different sizes fit the frame?
我正在尝试从 Internet 下载一系列网站图标,然后将其插入方形框架中。但是,它们有不同的尺寸,而且 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 的图标看起来不错,而 Facebook 太小,Amazon 或 Netflix 太大。
谢谢大家!
添加
.resizable()
图片修改器
我正在尝试从 Internet 下载一系列网站图标,然后将其插入方形框架中。但是,它们有不同的尺寸,而且 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 的图标看起来不错,而 Facebook 太小,Amazon 或 Netflix 太大。
谢谢大家!
添加
.resizable()
图片修改器