LazyVGrid 中的 NavigationLink 循环返回所有条目，SwiftUI

Posted 2023-02-24

【中文标题】LazyVGrid 中的 NavigationLink 循环返回所有条目，SwiftUI

【英文标题】：NavigationLink inside LazyVGrid cycles all entries on back, SwiftUI

【发布时间】：2020-10-06 17:18:35

【问题描述】：

我有一个图像网格。每个点击的图像都应该在 NavigationView 上推送一个带有图像详细信息的视图。

导航链接按预期工作，但是当我按下后退按钮时，它会打开下一个图像，依此类推，直到它循环所有图像。怎么回事？

这是View：

struct ImageGrid: View 
    
    @ObservedObject var part: Part
    @State private var showingImagePicker = false
    @State private var inputImage: UIImage?
    var body: some View 
        Button("add images")
            self.showingImagePicker = true
        
        LazyVGrid(columns: [GridItem(.adaptive(minimum:100))])
            ForEach(part.images) image in
                ZStack 
                    Image(uiImage: image.thumb)
                        .resizable()
                        .scaledToFit()
                    NavigationLink (
                        destination: ImageDetail(image:image),
                        label: 
                            EmptyView()
                        
                    ).buttonStyle(PlainButtonStyle())
                
            
        
        .sheet(isPresented: $showingImagePicker, onDismiss: loadImage) 
            ImagePicker(image: self.$inputImage)
        
        
    
    // other functions ...
    ...

这是细节View

struct ImageDetail: View 
    
    @ObservedObject var image: TrainingImage
    var body: some View 
        VStack 
            Image(uiImage: image.content)
                .resizable()
                .scaledToFit()
        
    

编辑：

这是一个隔离行为的独立示例。当网格位于表单部分内时，它似乎停止正常工作。消除表单和部分导航链接正常工作

import SwiftUI

extension String: Identifiable 
    public var id:Int 
        self.hashValue
    


struct ImageDetail: View 
    
    var image: String
    var body: some View 
        VStack 
            Image(uiImage: UIImage(systemName: image)!)
                .resizable()
                .scaledToFit()
        
    


struct ContentView: View 
    @State var images:[String] = ["plus", "minus"]
    var body: some View 
        NavigationView 
            Form 
                Section 
                    LazyVGrid(columns: [GridItem(.adaptive(minimum:100))])
                        ForEach(images) image in
                            NavigationLink (
                                destination: ImageDetail(image: image),
                                label: 
                                    Image(uiImage: UIImage(systemName: image)!)
                                        .resizable()
                                        .scaledToFit()
                                
                            ).buttonStyle(PlainButtonStyle())
                        
                    
                
            
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

【问题讨论】：

你会准备最小可重现的例子吗？

我现在提供了一个独立的例子

【参考方案1】：

自动检测行中的链接是表单/列表功能，但是你有几个行，所以效果。解决方案是从自动检测中分离单元格视图并隐藏链接。

使用 Xcode 12.0 / ios 14 测试

struct ContentView: View 
    @State var images:[String] = ["plus", "minus"]
    var body: some View 
        NavigationView 
            Form 
                Section 
                    LazyVGrid(columns: [GridItem(.adaptive(minimum:100))])
                        ForEach(images)
                                    ImageCellView(image: $0)
                        
                    
                
            
        
    


struct ImageCellView: View 
    var image: String
    @State private var isActive = false
    var body: some View 
        Image(uiImage: UIImage(systemName: image)!)
             .resizable()
             .scaledToFit()
            .onTapGesture 
                self.isActive = true
            
        .background(
             NavigationLink (
                  destination: ImageDetail(image: image), isActive: $isActive,
                  label: 
                    EmptyView()
                  
             ))
    

【讨论】：

链接在空视图上的原因是为了避免图像右侧的披露图标，将它放在里面或外面没有区别。

这是一个解决方案，但看起来这应该由苹果在未来修复吧？

我喜欢.background 的技术，但是当我从目的地导航回来时，屏幕的背景颜色会闪烁。