Home > Mobile >  How to use Multi NavigationLink in One Cell of List?
How to use Multi NavigationLink in One Cell of List?

Time:07-10

NavigationLink in List is automatically designed.

How to set appropriate multi NavigationLink in Cell?

I don't want use ForEach in ScrollView. Because I want to use swipeActions.

I don't want user NavigationLink(isActive). Because It is deprecated in iOS 16

struct TimelineView: View {
  let tweets: [Tweet] = tweets
  let users: [User] = users

  var body: some View {
    NavigationStack {
      List(tweets) { tweet in
        let user = users.first { $0.id == tweet.userID }!

        NavigationLink(value: tweet) {
          HStack {
            NavigationLink(value: user) {
              Image(systemName: "person")
                .foregroundStyle(user.color)
            }

            VStack {
              Text("@\(user.name)")
              Text(tweet.text)
            }
          }
        }
        .swipeActions(edge: .leading) {
          Button("Like") { }
        }
      }
      .navigationDestination(for: Tweet.self) { tweet in
        TweetDetailView(tweet: tweet)
      }
      .navigationDestination(for: User.self) { user in
        UserDetailView(user: user)
      }
    }
  }
}

CodePudding user response:

Approach is the same as before, ok, activation is now different, but simpler, just put value into NavigationStack path:

Here is a possible approach (based on tap gesture as we mentioned before) - Xcode 14b3 / iOS 16

enter image description here

@State var path = NavigationPath() // stack path

var body: some View {
    NavigationStack(path: $path) {
        List(tweets) { tweet in
            let user = users.first { $0.id == tweet.userID }!
            
            HStack {
                Image(systemName: "person")
                    .foregroundStyle(user.color)
                    .padding(4)
                    .highPriorityGesture(TapGesture().onEnded {
                        path.append(user)      // << here !!
                    })
                Spacer()
                VStack(alignment: .trailing) {
                    Text("@\(user.name)")
                    Text(tweet.text)
                }
            }
            .contentShape(Rectangle())
            .onTapGesture {
                path.append(tweet)        // << here !!
            }

Test module on GitHub

  • Related