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

Posted 2023-03-05

【中文标题】在迭代数组后通过 .sheet 显示模态时显示相同的图像

【英文标题】：Same image being shown when showing a modal via .sheet after iterating array

【发布时间】：2020-01-14 16:53:36

【问题描述】：

在一个 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 没有显示正确的图像？非常感谢。

【参考方案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)!)
    

【讨论】：

感谢大家的帮助 - 这个似乎成功了！现在我必须研究它为什么起作用并理解它！再次感谢。

【参考方案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)
            )

【讨论】：

感谢 Asperi - 也会尝试您的答案！