如何为SwiftUI的NavigationLink添加点击与长按手势

问题原因 #

你遇到的点击失效问题，本质是SwiftUI手势优先级冲突：长按手势（LongPressGesture）的优先级高于NavigationLink默认的点击手势，添加长按后，系统会优先响应长按，直接拦截了NavigationLink的点击事件。

完整解决方案代码 #

下面的代码同时实现了点击跳转详情页、长按置顶列表项的功能，兼容iOS13+：

import SwiftUI

// 假设的Item数据模型（需遵循Identifiable）
struct Item: Identifiable {
    let id: UUID
    let name: String
}

struct ItemView: View {
    let id: UUID
    var body: some View {
        Text("Item 详情：\(id.uuidString.prefix(8))")
            .navigationTitle("详情页")
    }
}

struct ContentView: View {
    // 数据源，用@State包装以支持视图刷新
    @State private var items: [Item] = [
        Item(id: UUID(), name: "Item 1"),
        Item(id: UUID(), name: "Item 2"),
        Item(id: UUID(), name: "Item 3")
    ]
    // 控制导航跳转的状态变量
    @State private var selectedItemId: UUID?
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    // 用Button处理普通点击事件
                    Button(action: {
                        selectedItemId = item.id
                    }) {
                        Text(item.name)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    // 绑定长按手势，处理置顶逻辑
                    .onLongPressGesture {
                        guard let index = items.firstIndex(where: { $0.id == item.id }) else { return }
                        let movedItem = items.remove(at: index)
                        items.insert(movedItem, at: 0)
                    }
                    // 隐藏的NavigationLink，通过状态变量触发跳转
                    .background(
                        NavigationLink(
                            destination: ItemView(id: item.id),
                            tag: item.id,
                            selection: $selectedItemId
                        ) {
                            EmptyView()
                        }
                        .opacity(0) // 完全隐藏，不影响界面
                    )
                }
            }
            .navigationTitle("列表")
        }
        .navigationViewStyle(.stack)
    }
}

iOS16+ 简化版本（使用NavigationStack） #

如果你的项目只需要兼容iOS16及以上，可以用NavigationStack替代NavigationView，代码更简洁：

struct ContentView: View {
    @State private var items: [Item] = [/* 数据源 */]
    @State private var navigationPath: [UUID] = []
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            List {
                ForEach(items) { item in
                    Button(action: {
                        navigationPath.append(item.id)
                    }) {
                        Text(item.name)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .onLongPressGesture {
                        guard let index = items.firstIndex(where: { $0.id == item.id }) else { return }
                        let movedItem = items.remove(at: index)
                        items.insert(movedItem, at: 0)
                    }
                }
            }
            .navigationTitle("列表")
            // 定义导航目的地
            .navigationDestination(for: UUID.self) { id in
                ItemView(id: id)
            }
        }
    }
}

核心原理解析 #

1. 手势优先级机制：SwiftUI的手势有明确的优先级排序，长按手势属于"连续型手势"，优先级高于NavigationLink依赖的"离散型点击手势"。当同一视图绑定多个手势时，高优先级手势会先响应，并且默认阻止低优先级手势触发——这就是原代码点击失效的根本原因。
2. 分离导航触发逻辑：我们通过Button处理点击事件，同时用隐藏的NavigationLink（或NavigationStack的path）实现手动导航，彻底避免了手势冲突。这种方式不依赖系统默认的点击手势，而是通过状态变量控制跳转，完全绕过了手势优先级的问题。
3. 数据源状态管理：置顶操作需要修改数组顺序，所以必须用@State（或外部数据源用@ObservedObject/@StateObject）包装数组，这样修改数组时SwiftUI会自动检测到变化并刷新列表视图。

内容的提问来源于stack exchange，提问作者Evel Knievel