SwiftUI Grid Images Can't be Tapped to Show DetailView

Question

I'm trying to create a collection view in SwiftUI. I can create the grid (of images in this case) but I have not found a way to click an image and transition to another view - neither a modal nor a full view. I am storing the images in CoreData and am using a method from Paul Hudson to break the images into rows:

https://www.hackingwithswift.com/example-code/language/how-to-split-an-array-into-chunks

This code does allow transitions, but with a single click it cycles through each of the images in the HStack row even though each photo has its own NavigationLink wrapper.

I have also tried a version where I made the grid from buttons and put the images into the buttons. That was worse - the detail content was not correct and Xcode complained mightily that: "Warning: Attempt to present <> on <> which is already presenting (null)." I also tried adding .onTapGesture{} to each image. Similar failure as the buttons.

struct ChunkedContentView: View {

    @Environment(\.managedObjectContext) var managedObjectContext
    @FetchRequest(fetchRequest: DermPhoto.getAllDermPhotos()) var dermPhotos: FetchedResults<DermPhoto>

    //@State private var columnCount = 3//hard coded to 3 at the moment
    @State private var showDetailView = false

    var body: some View {

        let chunkThis = DermPhoto.chunkTheDermPhotos()

        return GeometryReader { geo in
            NavigationView {
                List {
                    ForEach(0 ..< chunkThis.count) { index in
                        HStack {
                            ForEach(chunkThis[index]) { p in
                                NavigationLink(destination: DetailView(passedDerm: p)) {

                                Image(uiImage: UIImage(data: p.myImage!)!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: ((geo.size.width / 3) - 15), height: ((geo.size.width / 3) - 15))
                                    .border(Color.black)
                                    .clipped()
                                    //comment out NavigationLink and this does not work either
                                    //.onTapGesture {
                                    //self.showDetailView.toggle()
                                    //}
                                    //.sheet(isPresented: self.$showDetailView) {
                                    //DetailView(passedDerm: p)
                                    //}
                                    //either above or nav link
                                }//nav link
                            }
                        }
                    }
                }
                .navigationBarTitle("Time Series")
            }//nav
        }//geo
    }
}

As a second question, is there a way to disable showing the disclosure indicator of a NavigationLink?

Any guidance would be appreciated. Xcode 11.3 (11C29)

Just use ScrollView instead of List in your code snapshot and all works (as well as chevron /disclosure indicator/ have gone) — Asperi
Wow. Amazingly simple. Changing to ScrollView causes my images to be replaced with blue squares for some reason. I changed the call to p.myImage to a static system image and it works just as you describe. While my images are gone, the data in the detail view is correct, so I am getting the Core Data entity, but something in the change from List to ScrollView is affecting the display of the images. — JohnSF
While it seems very strange, if I add .buttonStyle(PlainButtonStyle()) to the NavigationLink the images show as expected. — JohnSF

JohnSF JohnSF · Accepted Answer · 2019-12-23T04:52:28

@Asperi deserves the credit - use ScrollView instead of List. That also removes the disclosure indicator. If you use images you need to add .buttonStyle(PlainButtonStyle()) to the NavigationLink. If you use system icons you may not need that step.

SwiftUI Grid Images Can't be Tapped to Show DetailView

1 Answers