在SwiftUI中刷新远程加载的图像

Question

这是很多代码，看起来令人生畏，但它非常简单——我正在尝试加载远程图像，当图像被单击时，我想切换到下一个图像:

struct TestView: View {
@State var selectedIndex: Int = 0
@State var arrayOfImages: [String] = ["https://s3-media3.fl.yelpcdn.com/bphoto/_0bkRz0wln3URHevWORCkA/o.jpg", "https://s3-media2.fl.yelpcdn.com/bphoto/MDZXc4pDt5xUfXF0Rw6rMw/o.jpg", "https://s3-media3.fl.yelpcdn.com/bphoto/feYg35an2MilNK3dCwwqTQ/o.jpg"]
var body: some View {
RemoteImage(url: arrayOfImages[selectedIndex])
.scaledToFill()
.frame(width: 200, height: 200)
.clipped()
.onTapGesture {
selectedIndex += 1
}
}
}
struct RemoteImage: View {
private enum LoadState {
case loading, success, failure
}

private class Loader: ObservableObject {
var data = Data()
var state = LoadState.loading

init(url: String) {
guard let parsedURL = URL(string: url) else {
fatalError("Invalid URL: (url)")
}

URLSession.shared.dataTask(with: parsedURL) { data, response, error in
if let data = data, data.count > 0 {
self.data = data
self.state = .success
} else {
self.state = .failure
}

DispatchQueue.main.async {
self.objectWillChange.send()
}
}.resume()
}
}

@StateObject private var loader: Loader
var loading: Image
var failure: Image

var body: some View {
selectImage()
.resizable()
}

init(url: String, loading: Image = Image(""), failure: Image = Image(systemName: "multiply.circle")) {
_loader = StateObject(wrappedValue: Loader(url: url))
self.loading = loading
self.failure = failure
}

private func selectImage() -> Image {
switch loader.state {
case .loading:
return loading
case .failure:
return failure
default:
if let image = UIImage(data: loader.data) {
return Image(uiImage: image)
} else {
return failure
}
}
}
}

问题是:当你点击图像时，它不会转到下一个图像。我认为这是因为RemoteImage视图没有被重新加载，但我不确定如何修复。任何帮助都是感激的!

Answer 1

我认为你试图做太多RemoteImage内部,特别是声明私有@StateObject private var loader: Loader和由此派生的所有内容。

在RemoteImage之外的@StateObject var loader = Loader()尝试此方法。

struct ContentView: View {
var body: some View {
TestView()
}
}
struct TestView: View {
@StateObject var loader = Loader() // <-- here

@State var selectedIndex: Int = 0
@State var arrayOfImages: [String] = ["https://s3-media3.fl.yelpcdn.com/bphoto/_0bkRz0wln3URHevWORCkA/o.jpg", "https://s3-media2.fl.yelpcdn.com/bphoto/MDZXc4pDt5xUfXF0Rw6rMw/o.jpg", "https://s3-media3.fl.yelpcdn.com/bphoto/feYg35an2MilNK3dCwwqTQ/o.jpg"]

var body: some View {
RemoteImage(loader: loader) // <--- here
.scaledToFill()
.frame(width: 200, height: 200)
.clipped()
.onTapGesture {
selectedIndex += 1
if selectedIndex < arrayOfImages.count {  
loader.load(url: arrayOfImages[selectedIndex])  // <-- here
} else {
//...
}
}
.onAppear {
loader.load(url: arrayOfImages[selectedIndex]) // <--- here
}
}
}
class Loader: ObservableObject {
var data = Data()
var state = LoadState.loading

func load(url: String) { // <--- here
guard let parsedURL = URL(string: url) else {
fatalError("Invalid URL: (url)")
}
URLSession.shared.dataTask(with: parsedURL) { data, response, error in
if let data = data, data.count > 0 {
self.data = data
self.state = .success
} else {
self.state = .failure
}

DispatchQueue.main.async {
self.objectWillChange.send()
}
}.resume()
}
}
enum LoadState {
case loading, success, failure
}
struct RemoteImage: View {
@ObservedObject var loader: Loader  // <--- here

var loading: Image = Image("")
var failure: Image = Image(systemName: "multiply.circle")

var body: some View {
selectImage().resizable()
}

private func selectImage() -> Image {
switch loader.state {
case .loading:
return loading
case .failure:
return failure
default:
if let image = UIImage(data: loader.data) {
return Image(uiImage: image)
} else {
return failure
}
}
}
}