SwiftUI中仅点击List行内按钮触发详情页跳转的实现方法

SwiftUI 列表组件对单元格内的 NavigationLink 有默认的行为托管：只要 NavigationLink 直接作为单元格视图层级的子节点存在，系统会自动将整行设置为导航触发热区，不管你把 NavigationLink 的视觉范围缩到多小，点击单元格任意位置都会触发跳转。

改用状态绑定的方式手动控制 NavigationLink 的触发时机，把 NavigationLink 从正常交互流里移除，仅作为跳转动作的承载容器，就能把跳转触发范围完全限定在「Show Detail」按钮上。
示例代码：

struct ListItemCell: View {
    let data: ItemModel
    // 当前行的详情跳转触发状态
    @State private var triggerDetailPush = false
    
    var body: some View {
        HStack {
            // 单元格原有信息展示区
            VStack(alignment: .leading) {
                Text(data.title)
                    .font(.system(size: 16, weight: .medium))
                Text(data.desc)
                    .font(.system(size: 13))
                    .foregroundColor(.gray)
            }
            
            Spacer()
            
            // 行内功能按钮组
            Button {
                // 编辑条目逻辑
            } label: {
                Image(systemName: "square.and.pencil")
            }
            .buttonStyle(.borderless)
            
            Button {
                // 打开条目子视图逻辑
            } label: {
                Image(systemName: "chevron.right.square")
            }
            .buttonStyle(.borderless)
            
            // 仅这个按钮点击后触发详情跳转
            Button("Show Detail") {
                triggerDetailPush = true
            }
            .buttonStyle(.borderless)
        }
        // 隐藏式放置NavigationLink，不占用交互热区
        .background(
            NavigationLink(
                destination: DetailView(item: data),
                isActive: $triggerDetailPush
            ) { EmptyView() }
            .opacity(0)
        )
        // 禁用列表默认的整行点击高亮效果
        .buttonStyle(.plain)
    }
}

• 不要把NavigationLink直接放在HStack/VStack等行内容器里，必须放在background/overlay等非交互流的修饰符层级，否则系统还是会自动接管整行点击
• 行内所有按钮统一使用.borderless样式，避免按钮点击事件被列表行的默认手势拦截
• 所有跳转逻辑完全通过你自己声明的triggerDetailPush状态变量控制，不会出现非预期的跳转触发

适配提示：如果项目最低支持iOS 16及以上系统，可以直接用navigationDestination修饰符配合选中项状态实现，不需要在每个单元格内放置隐藏的NavigationLink，代码结构会更简洁。

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