这个问题是由于SwiftUI的异步行为造成的。在滚动列表时,SwiftUI可能会在后台删除AsyncImage,使得图片不会被加载。
解决方法是使用一个自定义的Button或NavigationLink,将其包裹在一个自定义的View中,然后在自定义View中加载AsyncImage。这样,当列表滚动时,AsyncImage将保持在视图中,并正常加载图片。
以下是示例代码:
struct CustomImageButton: View {
let imageName: String
let action: () -> Void
@State private var image: UIImage?
var body: some View {
Button(action: action) {
if let image = image {
Image(uiImage: image)
.resizable()
.scaledToFit()
} else {
ProgressView()
}
}
.onAppear {
loadImage()
}
}
private func loadImage() {
guard let url = URL(string: imageName) else { return }
let task = URLSession.shared.dataTask(with: url) { data, response, error in
guard let data = data, error == nil else { return }
DispatchQueue.main.async {
self.image = UIImage(data: data)
}
}
task.resume()
}
}
使用这个自定义Button的代码类似于这样:
struct ContentView: View {
let imageURLs = [
"https://picsum.photos/200",
"https://picsum.photos/300",
"https://picsum.photos/400"]
var body: some View {
List(imageURLs, id: \.self) { url in
CustomImageButton(imageName: url) {
// Do something
}
}
}
}
现在,当列表滚动时,AsyncImage将一直存在,并且图片将会正常加载。