CODEWITHSUNDEEP
swiftuidouble-clicknavigationviewswiftui-navigationlink
mousebat
mousebat

Reputation: 494

SwiftUI NavigationLink double click on List MacOS

Can anyone think how to call an action when double clicking a NavigationLink in a List in MacOS? I've tried adding onTapGesture(count:2) but it does not have the desired effect and overrides the ability of the link to be selected reliably.

var body: some View {
    NavigationView {
        List {
            ForEach(items) { item in
                NavigationLink(destination: Item(itemDetail: item)) {
                    ItemRow(itemRow: item) //<-my row view
                }.buttonStyle(PlainButtonStyle())
                 .simultaneousGesture(TapGesture(count:2)
                 .onEnded {
                     print("double tap")
                })
            }
        }
    }
}

EDIT:

I've set up a tag/selection in the NavigationLink and can now double or single click the content of the row. The only trouble is, although the itemDetail view is shown, the "active" state with the accent does not appear on the link. Is there a way to either set the active state (highlighted state) or extend the NavigationLink functionality to accept double tap as well as a single?

@State var selection:String?
var body: some View {
    NavigationView {
        List {
            ForEach(items) { item in
                NavigationLink(destination: Item(itemDetail: item), tag: item.id, selection: self.$selection) {
                    ItemRow(itemRow: item) //<-my row view
                }.onTapGesture(count:2) { //<- Needed to be first!
                    print("doubletap")
                }.onTapGesture(count:1) {
                    self.selection = item.id
                }
            }
        }
    }
}

Upvotes: 4

Views: 1974

Answers (4)

Accatyyc
Accatyyc

Reputation: 5828

Here's another solution that seems to work the best for me. It's a modifier that adds an NSView which does the actual handling. Works in List even with selection:

extension View {
    /// Adds a double click handler this view (macOS only)
    ///
    /// Example
    /// ```
    /// Text("Hello")
    ///     .onDoubleClick { print("Double click detected") }
    /// ```
    /// - Parameters:
    ///   - handler: Block invoked when a double click is detected
    func onDoubleClick(handler: @escaping () -> Void) -> some View {
        modifier(DoubleClickHandler(handler: handler))
    }
}

struct DoubleClickHandler: ViewModifier {
    let handler: () -> Void
    func body(content: Content) -> some View {
        content.background {
            DoubleClickListeningViewRepresentable(handler: handler)
        }
    }
}

struct DoubleClickListeningViewRepresentable: NSViewRepresentable {
    let handler: () -> Void
    func makeNSView(context: Context) -> DoubleClickListeningView {
        DoubleClickListeningView(handler: handler)
    }
    func updateNSView(_ nsView: DoubleClickListeningView, context: Context) {}
}

class DoubleClickListeningView: NSView {
    let handler: () -> Void

    init(handler: @escaping () -> Void) {
        self.handler = handler
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func mouseDown(with event: NSEvent) {
        super.mouseDown(with: event)
        if event.clickCount == 2 {
            handler()
        }
    }
}

https://gist.github.com/joelekstrom/91dad79ebdba409556dce663d28e8297

Upvotes: 4

Denny L.
Denny L.

Reputation: 391

I've tried all these solutions but the main issue is using gesture or simultaneousGesture overrides the default single tap gesture on the List view which selects the item in the list. As such, here's a simple method I thought of to retain the default single tap gesture (select row) and handle a double tap separately.

struct ContentView: View {
    @State private var monitor: Any? = nil
    @State private var hovering = false
    @State private var selection = Set<String>()
    
    let fruits = ["apple", "banana", "plum", "grape"]

    var body: some View {
        List(fruits, id: \.self, selection: $selection) { fruit in
            VStack {
                Text(fruit)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .clipShape(Rectangle()) // Allows the hitbox to be the entire word not the if you perfectly press the text  
            }
            .onHover {
                hovering = $0
            }
        }
        .onAppear {
            monitor = NSEvent.addLocalMonitorForEvents(matching: .leftMouseDown) {
                if $0.clickCount == 2 && hovering { // Checks if mouse is actually hovering over the button or element
                    print("Double Tap!") // Run action
                }
                return $0
            }
        }
        .onDisappear {
            if let monitor = monitor {
                NSEvent.removeMonitor(monitor)
            }
        }
    }
}

This works if you just need to single tap to select and item, but only do something if the user double taps. If you want to handle a single tap and a double tap, there still remains the problem of single tap running when its a double tap. A potential work around would be to capture and delay the single tap action by a few hundred ms and cancel it if it was a double tap action

Upvotes: 1

Cory Loken
Cory Loken

Reputation: 1395

Looking for a similar solution I tried @asperi answer, but had the same issue with tappable areas as the original poster. After trying many variations the following is working for me:

@State var selection: String?
...
NavigationLink(destination: HistoryListView(branch: string), tag: string, selection: self.$selection) {
  Text(string)
    .gesture(
      TapGesture(count:1)
        .onEnded({
          print("Tap Single")
          selection = string
        })
    )
    .highPriorityGesture(
      TapGesture(count:2)
        .onEnded({
          print("Tap Double")
        })
    )
}

Upvotes: 0

Asperi
Asperi

Reputation: 257693

Use simultaneous gesture, like below (tested with Xcode 11.4 / macOS 10.15.5)

NavigationLink(destination: Text("View One")) {
    Text("ONE")
}
.buttonStyle(PlainButtonStyle())        // << required !!
.simultaneousGesture(TapGesture(count: 2)
    .onEnded { print(">> double tap")})

or .highPriorityGesture(... if you need double-tap has higher priority

Upvotes: 0

Related Questions