Search code examples
swiftuiswiftui-listswiftui-navigationlink

SwiftUI NavigationLink in list


I tried to do a list which have image and a navigation link inside. In iOS 14.1 everything work fine but after I update my iOS to 14.2, something break. In the list while the user click the big image there will be a action sheet pop out, while the user click a systemImage it will trigger a navigation link. However, when I update to iOS 14.2, no matter what I clicked, it will trigger the NavigationLink. Can someone explain to me why will this happened and how to solve?

enter image description here

Here is the sample code

struct ContentView : View {
    
    @State var showingActionSheet = false
    @State private var action: Int? = 0
    
    var body: some View {
        NavigationView {
            List{
                VStack(alignment: .leading){
                    HStack{
                        VStack(alignment: .leading){
                            Text("my data")
                            Text("2020/12/12")
                        }
                    }
                    Image("profile")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .onTapGesture(count: 1) {
                            self.showingActionSheet.toggle()
                        }
                    HStack{
                        Image(systemName: "message")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 25)
                            .foregroundColor(.gray)
                            .onTapGesture {
                                self.action = 1
                                print("select comment")
                            }
                        
                        NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
                            EmptyView()
                        }
                    }
                }
                .actionSheet(isPresented: $showingActionSheet) {
                    //action sheet
                    ActionSheet(title: Text("Test"), message: Text("Select a selection"), buttons: [
                        .default(Text("test")) { print("test") },
                        .cancel()
                    ])
                }
                
            }
        }
    }
}

Solution

  • Try the following (disabling navigation link prevents user interaction on it, but programmatically it is activated):

    HStack{
        Image(systemName: "message")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 25)
            .foregroundColor(.gray)
            .onTapGesture {
                self.action = 1
                print("select comment")
            }
        NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
            EmptyView()
        }.disabled(true)      // << here !!
    }