NavigationLink 不适用于第一个元素

Question

I am using searchable to display users matching the name searched.

What's happening is if I have names in similar searches (ie. Sarah & Sara) and those two names are displayed at the same time, the first navigationLink is not clickable. I'll post a screenshot below as an example. Meanwhile the second, third, etc works fine.

(As a note, I don't think my mouse cursor showed up on the GIF, but I was clicking the first button and no results).

struct FollowingListRow: View {

    var body: some View {
        HStack{
            Image("exampleImage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width:60, height: 60)
                .clipShape(Circle())
                .padding(.trailing, 45)
             
            VStack{
                Text("Test")
                    .font(.title2)
                NavigationLink(destination: TestView()){
                    Text("View Profile")
                    .font(.caption)
                    .foregroundColor(.black)
                    .padding(3) //general padding
                    .padding([.leading, .trailing], 15) // << side padding
                    .border(.black)
                    .padding(.top, -5) // <<bring up button
                }
               
              
            }
            
        }
        .padding()
    }
}

struct FollowingListView: View {
@State var allUsers = ["Sara", "Sarah", "Teddy", "Jill"]
@State private var userSearch = ""

var body: some View {
    NavigationView{
            VStack{
                //DISPLAY USERS
                ScrollView{
                    ForEach ((allUsers), id:\.id ) { user in
                        if user.name.contains(userSearch){
                            FollowingListRow()
                        }
                    }
                }
            }
            .padding(.top, 15) // << add separation from list and search bar
            .navigationBarTitle("Search Users")
           
        //SEARCH
            .searchable(text: $userSearch,placement: .navigationBarDrawer(displayMode: .always), prompt: "Search for Users") // << always display search bar
    }

    
}

Answer 1

Demo

   struct FollowingListRow: View {
    
    //MARK: - PROPERTIES
    var name: String
    
    //MARK: - BODY
    var body: some View {
        
        HStack{
            Image("exampleImage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width:60, height: 60)
                .clipShape(Circle())
                .padding(.trailing, 45)
            
            VStack{
                Text(name)
                    .font(.title2)
                NavigationLink(destination: Text("\(name)")){
                    Text("View Profile")
                        .font(.caption)
                        .foregroundColor(.black)
                        .padding(3) //general padding
                        .padding([.leading, .trailing], 15) // << side padding
                        .border(.black)
                        .padding(.top, -5) // <<bring up button
                }
                
            }
            
        }
        .padding()
    }
}

struct FollowingListView: View {
    
    @State private var allUsers: [User] = [
        User(name: "Sara", id: 1),
        User(name: "Sarah", id: 2),
        User(name: "Teddy", id: 3),
        User(name: "Jill", id: 4)
    ]
    
    @State private var userSearch = ""
    
    var body: some View {
        NavigationView{
            VStack{
                //DISPLAY USERS
                ScrollView{
                    ForEach (allUsers, id:\.id ) { user in
                        if user.name.contains(userSearch){
                            FollowingListRow(name: user.name)
                        }
                    }
                }
            }
            .padding(.top, 15) // << add separation from list and search bar
            .navigationBarTitle("Search Users")
            
            //SEARCH
            .searchable(text: $userSearch,placement: .navigationBarDrawer(displayMode: .always), prompt: "Search for Users") // << always display search bar
        }
        
        
    }
}


//User Model
struct User{
    var name: String
    var id: Int
}

I have modified your code a bit with dummy data for testing purpose. But the navigations are working fine. Please check your Destination TestView.The issue could be there.