LazyVGrid 中的 NavigationLink 循环后面的所有条目，SwiftUI [英] NavigationLink inside LazyVGrid cycles all entries on back, SwiftUI

问题描述

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

I have an image grid. Each image on tap should push a view on the NavigationView with the image details.

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

The navigation link works as intended, but when I press the back button it opens the next image and so on until it has cycled all the images. What is going on?

这是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()
        }
    }
}

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

This is a self-contained example isolating the behaviour. It seems to stop working correctly when the grid is inside a form section. Eliminating the form and the section the navigation link works correctly

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()
    }
}

推荐答案

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

It is Form/List feature to auto-detect links in rows, but you have several in row, so the effect. The solution would be to separate cell view and hide link from auto-detection.

使用 Xcode 12.0/iOS 14 测试

Tested with 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()
                  }
             ))
    }
}

这篇关于LazyVGrid 中的 NavigationLink 循环后面的所有条目，SwiftUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！