I have a WineInfoView that displays an array of images of a particular wine. The last “image” in the horizontal scroll is a blank image that when tapped on shows the users camera roll and allows them to add a new image.
When I test it out in HorizontalImageScrollView() i correctly places the new image before the last “image” but the changes are visible when tested in “WineInfoView“` or running the app on my device.
Here is the code for the two views:
WineInfoView
struct WineInfoView: View {
//ADD MODEL HERE
@State var wine: Wine
var body: some View {
HorizontalImageScrollView(wine: $wine)
}
}
Horizontal Image Scroll:
struct HorizontalImageScrollView: View {
@Binding var wine: Wine
//For selecting / adding phtotos
@State var photoPickerPresented: Bool = false
@State var cameraPresente: Bool = false
@State private var selectedItem: PhotosPickerItem?
@State var image: UIImage?
var body: some View {
ScrollView(.horizontal, content: {
//parse through images that exist
HStack {
ForEach(wine.images, id: \.self) { image in
Image(uiImage: image)
.resizable()
.scaledToFill()
.frame(width: 175, height: 250)
.clipShape(RoundedRectangle(cornerRadius: 25.0))
.padding()
}
////////////////////////////////////////////////////////////////////////////
///// PHOTO PICKER
//empty "Image" to add more pictures
PhotosPicker(selection: $selectedItem, label: {
ZStack {
Color(uiColor: UIColor(rgb: 0xEDEDE9))
.frame(width: 175, height: 250)
.clipShape(RoundedRectangle(cornerRadius: 25.0))
.padding([.leading,.trailing])
Image(systemName: "plus.circle.fill")
}
})
.onChange(of: selectedItem) {
Task {
if let data = try? await selectedItem?.loadTransferable(type: Data.self) {
image = UIImage(data: data)
//add image to local object
wine.images.append(image!)
//update record in DB
updateWineRecordPhotos(wine.images)
} else {
print("Failed to load the image")
}
}
}
////////////////////////////////////////////////////////////////////////////
}
})
}
}
Can someone explain why the changes are not being displayed in the WineInfoView




