CODEWITHSUNDEEP
swiftuiswiftui-listswiftui-navigationlink
SAS231
SAS231

Reputation: 185

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()
                    ])
                }
                
            }
        }
    }
}

Upvotes: 2

Views: 2380

Answers (3)

Divesh singh
Divesh singh

Reputation: 437

Using Zstack on top of all can be the reason. Please check once without ZStack

Upvotes: 0

Asperi
Asperi

Reputation: 257711

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 !!
}

Upvotes: 2

Charles C.
Charles C.

Reputation: 194

You can use isActive to trigger the navigation link.

@State var isCommentPresented = false
...
Image(systemName: "message")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 25)
    .foregroundColor(.gray)
    .onTapGesture {
        self.isCommentPresented = true
        print("select comment")
    }
}                        
NavigationLink(destination: Text("test"), isActive:self.$isCommentPresented) {
   EmptyView()
}

Upvotes: 0

Related Questions