在迭代数组后通过 .sheet 显示模态时显示相同的图像

Question

在一个 swiftui 应用程序中，我正在迭代一个实体数组并显示缩略图图像，并设置它，当点击一个实体时，会显示带有该特定全尺寸图像的详细视图。问题在于，在进入详细信息屏幕时，它总是显示最新的图像。

主视图：

   if documents.count > 0 {
        ScrollView(.horizontal, showsIndicators: true) {
            HStack {
                ForEach(documents, id: \.self.id) {(doc: Document) in
                    Image(uiImage: UIImage(data: doc.image)!)
                    .resizable()
                    .frame(width: 40, height: 50, alignment: .center)
                    .clipShape(Rectangle())
                    .cornerRadius(8)
                    .scaledToFit()
                    .onTapGesture {
                        self.showImageDetail = true

                    }
                    .padding(.all, 5)
                    .sheet(isPresented: self.$showImageDetail, content: {
                        ImageViewDetail(image: UIImage(data: doc.image)!)
                    })
                }
            }
        }
    } 

显示 ImageDetailView 时，它始终是最新保存的图像。下面是详细视图代码：

import SwiftUI
struct ImageViewDetail: View {
    @Environment(\.presentationMode) var presentationMode
    @State var image: UIImage
    @State var scale: CGFloat = 1.0

    var body: some View {
        VStack {
            Image(uiImage: image)
                .resizable()
                .padding()
                .scaledToFit()
                .scaleEffect(scale)
                .cornerRadius(8)
                .gesture(MagnificationGesture()
                    .onChanged {value in
                        self.scale = value.magnitude
                    }
                )

            HStack {
                Button("Back") {
                    self.presentationMode.wrappedValue.dismiss()
                }
                .buttonStyle(FillStyle(width: 86, height: 32))
                .padding(.trailing, 10)

                Button("Delete") {

                }
                .buttonStyle(FillStyle(width: 86, height: 32))
                .padding(.leading, 10)
            }
        }
        .navigationBarTitle("Image", displayMode: .inline)
    }
}

任何帮助将不胜感激 - 我似乎不明白为什么 ImageDetailView 没有显示正确的图像？非常感谢。

Answer 1

将Bool 状态替换为Document? 状态：

@State var selectedDocument: Document?

var body: some View {
    HStack {
        ForEach(documents, id: \.self.id) {(doc: Document) in
            Image(uiImage: UIImage(data: doc.image)!)
                .onTapGesture {
                    self.selectedDocument = doc
                }
            }
        }
    }
    .sheet(item: $selectedDocument) {
        ImageViewDetail(image: UIImage(data: $0.image)!)
    }
}

Answer 2

Sheet在视图层次结构中只能是一个，因此在其下方为HStack重新定位，需要添加成员currentImage

这是一种粗糙的方法...（未经测试 - 可能需要注意选项）

@State private var currentImage: UIImage = UIImage() // < needed optionals?
...

ScrollView(.horizontal, showsIndicators: true) {
    HStack {
        ForEach(documents, id: \.self.id) {(doc: Document) in
            Image(uiImage: UIImage(data: doc.image)!)
            .resizable()
            .frame(width: 40, height: 50, alignment: .center)
            .clipShape(Rectangle())
            .cornerRadius(8)
            .scaledToFit()
            .onTapGesture {
                self.currentImage = UIImage(data: doc.image) ?? UIImage() // < current
                self.showImageDetail = true
            }
            .padding(.all, 5)
        }
    }
    .sheet(isPresented: self.$showImageDetail, content: { // < one sheet
                ImageViewDetail(image: self.currentImage)
            })
}