Multiple navigation destinations from a list row in SwiftUI

Question

This is my list row (cell):

I want to navigate to different navigation destinations depending on what's tapped on the list row. If the profile image is tapped, I want to navigate to ProfileView (push ProfileView into the navigation stack). If the row is tapped anywhere else, I want to navigate to PostDetailView (push PostDetailView into the navigation stack).

When I add NavigationLink to the profile image, it changes the frame of the image and adds a disclosure indicator as follows:

NavigationLink {
  ProfileView(user: post.user)
} label: {
  ProfileImage(url: post.user.profileImage)
}

List row with navigation link on ProfileImage:

And when I add navigation link to the whole PostView it adds another disclosure indicator to the row (so there's two of them now) as follows:

NavigationLink {
  PostDetailView(post: post)
} label: {
  PostView(post: post)
}

List row with navigation link on ProfileImage and PostView:

I have tried this hack to get rid of the arrows on both the ProfileView and the PostView, but the behavior of the navigation is inconclusive. Sometimes it navigates to ProfileView, sometimes it navigates to PostDetailView.

ZStack {
  PostView(post: post)

  NavigationLink {
    PostDetailView(post: post)
  } label: {
    EmptyView()
  }
  .opacity(0.0) //workaround to hide disclosure indicator
}

Any help would be appreciated.

The generic approach for such scenario is to use either tap gestures or plain buttons which activate corresponding navigation link programmatically. — Asperi, Jul 09 '22 at 04:56
lots of suggestions here to try https://stackoverflow.com/questions/57130866/how-to-show-navigationlink-as-a-button-in-swiftui — malhal, Jul 20 '22 at 23:40

score 0 · Answer 1 · answered Jul 08 '22 at 23:02

I'm not 100% sure if this would work (I haven't tested it and there aren't any specs to back it up), but you might be able to change the destination of the NavigationLink dynamically.

@State private var target: some View

// ...

NavigationLink {
   target
} label: {
    ProfileImage(/*...*/)
        .onTapGesture {
            target = ProfileView(/*...*/)
        }
    
    PostView(/*...*/)
        .onTapGesture {
            target = PostDetailView(/*...*/)
        }
}

Multiple navigation destinations from a list row in SwiftUI

1 Answers1