如何实现样式与NavigationLink一致但不触发页面跳转的List行？

要实现具备NavigationLink的箭头样式、整行高亮，同时点击触发自定义动作（而非页面跳转）的列表行，有两种常用方案：

方案一：复用NavigationLink+手势拦截 #

利用NavigationLink原生的外观，通过设置空目标+同步手势来实现需求：

import SwiftUI

struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: EmptyView()) {
                    Text("点击弹出Sheet")
                }
                // 添加同步手势触发自定义动作
                .simultaneousGesture(TapGesture().onEnded {
                    showSheet = true
                })
                .sheet(isPresented: $showSheet) {
                    Text("弹出的Sheet内容")
                        .presentationDetents([.medium])
                }
            }
            .navigationTitle("示例")
        }
    }
}

说明 #

• NavigationLink(destination: EmptyView()) 保留了原生的箭头和整行高亮样式，但不会触发页面跳转
• simultaneousGesture 让点击动作同时触发自定义逻辑（比如弹出Sheet），不影响NavigationLink的视觉反馈

方案二：自定义Button模拟NavigationLink样式 #

如果不想依赖NavigationLink，可以手动用Button实现相同外观：

import SwiftUI

struct CustomNavRow: View {
    let title: String
    let onTap: () -> Void
    
    var body: some View {
        Button(action: onTap) {
            HStack {
                Text(title)
                Spacer()
                // 系统原生箭头图标
                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
            }
        }
        .buttonStyle(.plain) // 移除Button默认样式，保留列表行外观
        .listRowInsets(EdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16)) // 对齐原生行内边距
    }
}

// 使用示例
struct ContentView: View {
    @State private var showSheet = false
    
    var body: some View {
        NavigationStack {
            List {
                CustomNavRow(title: "点击弹出Sheet") {
                    showSheet = true
                }
            }
            .navigationTitle("示例")
            .sheet(isPresented: $showSheet) {
                Text("弹出的Sheet内容")
                    .presentationDetents([.medium])
            }
        }
    }
}

说明 #

• 手动添加chevron.right图标模拟NavigationLink的箭头
• .buttonStyle(.plain) 确保Button点击时整行高亮，和原生列表行行为一致
• 自定义listRowInsets可以让行内边距和原生NavigationLink完全对齐

两种方案都能实现类似苹果提醒事项App的交互效果，方案一更贴近原生组件的视觉和动效，方案二则更灵活可控。

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