SwiftUI List Row onTapGesture to handle Push

Question

I have a DetailView with non-optional person variable:

struct DetailView: View {
    let person: Person
    var body: some View {
        VStack {
            Text("Person Name: \(person.name)")
            Text("Person Email: \(person.email)")
        }
    }
}

class Person: Identifiable {
    let id = UUID()
    let name: String
    let email: String
    init(name: String, email: String) {
        self.name = name
        self.email = email
    }
}

I have a ContentView (home screen), loading a list of Person IDs:

struct ContentView: View {
    private let personIDs: [String] = ["xx1", "xx2", "xx3", "xx4", "xx5"]
    var body: some View {
        NavigationView(content: {
            List(self.personIDs, id: \.self) { personID in
                Text("personID: \(personID)")
            }
        })
    }
}

The problem here is when I tap on the row, I want to fetch the person data from server before pushing to DetailView, but having a trouble with it:

struct ContentView: View {
    private let personIDs: [String] = ["xx1", "xx2", "xx3", "xx4", "xx5"]
    var body: some View {
        NavigationView(content: {
            List(self.personIDs, id: \.self) { personID in
                Text("personID: \(personID)")
                    .onTapGesture {
                        // Load Person data (by `personID`) from server.
                        // How can I push to DetailView here?
                    }
            }
        })
    }
}

I have tried with NavigationLink but there is no person data for DetailView initializing:

struct ContentView: View {
    private let personIDs: [String] = ["xx1", "xx2", "xx3", "xx4", "xx5"]
    var body: some View {
        NavigationView(content: {
            List(self.personIDs, id: \.self) { personID in
                // `person` argument is non-optional
                // no `person: Person` data here
                NavigationLink(destination: DetailView(person: /* ??? */)) {
                    Text("personID: \(personID)")
                        .onTapGesture {
                            // Load Person data (by `personID`) from server.
                            // ???
                        }
                }
            }
        })
    }
}

Does anyone faced this problem and how to solve it?

score 0 · Answer 1 · answered Nov 25 '20 at 23:22

Finally, I founded a way to fix it. Thanks to @William Hu on this article SwiftUI NavigationLink: how to call a function before showing destination view

Specifically, for my problem:

struct ContentView: View {
    
    private let personIDs: [String] = ["xx1", "xx2", "xx3", "xx4", "xx5"]
    @State private var person: Person = Person(name: "", email: "")
    @State private var navigationLinkTriggerer: String? = nil
    
    var body: some View {
        NavigationView(content: {
            List(self.personIDs, id: \.self) { personID in
                Button(action: {
                    // --- --- ---
                    // Simulate loading data from server
                    self.person = Person(name: "\(personID) Name", email: "\(personID)@gmail.com")
                    
                          // ---
                          // Completion Handler
                          self.navigationLinkTriggerer = personID
                          // ---
                    
                    // --- --- ---
                }, label: {
                    NavigationLink(destination: DetailView(person: person),
                                   tag: personID,
                                   selection: self.$navigationLinkTriggerer) {
                        Text("personID: \(personID)")
                    }
                })
                
            }
        })
    }
}

SwiftUI List Row onTapGesture to handle Push

1 Answers1