SwiftUI List中NavigationLink点击范围覆盖整个VStack如何解决

SwiftUI 的 List 组件默认会自动将行内识别到的可交互元素（包含NavigationLink）的点击热区扩展到整行可用范围。当NavigationLink被放在Cell的.background修饰符中时，系统命中测试逻辑会将链接的响应范围向上透传至外层VStack，最终导致整个容器区域点击都会触发跳转。

方案1：状态驱动的隐藏导航方案（兼容iOS15+，稳定性最高） #

核心思路是把导航触发逻辑和UI视图完全解耦，从根源避免List自动扩展热区，不要把NavigationLink放在任何视图的background/overlay中，改用布尔状态控制导航激活，仅给目标Cell绑定点击事件触发状态变化，参考代码如下：

struct YourPageView: View {
    // 导航跳转状态控制
    @State private var isNavActive = false
    
    var body: some View {
        List {
            VStack {
                InnerVStack {
                    // 其他非跳转区域内容
                }

                InnerVStack {
                    // 其他非跳转区域内容
                    
                    Cell()
                        .onTapGesture {
                            // 仅点击Cell时才修改状态触发跳转
                            isNavActive = true
                        }
                    
                    // 其他非跳转区域内容
                }
            }
            // 导航链接仅作为跳转载体，隐藏不占用UI空间
            .background {
                NavigationLink(
                    destination: YourTargetDetailView(),
                    isActive: $isNavActive
                ) { EmptyView() }
                    .frame(width: 0, height: 0)
                    .hidden()
            }
        }
    }
}

该方案下NavigationLink本身没有可点击的显示内容，也不会被List识别为行内默认交互元素，所有跳转触发逻辑完全由Cell的点击事件控制，不会出现热区溢出问题。

方案2：点击拦截方案（兼容iOS14及更低版本） #

如果需要适配低系统版本，可以给所有不需要触发跳转的区域添加点击拦截，阻断点击事件向NavigationLink透传：

List {
    VStack {
        InnerVStack {
            // 其他非跳转区域内容
        }
        // 给非跳转区域设置点击拦截
        .contentShape(Rectangle())
        .onTapGesture {}

        InnerVStack {
            // 其他非跳转区域内容
                .contentShape(Rectangle())
                .onTapGesture {}
            
            Cell()
               .background { 
                   NavigationLink(destination: YourTargetDetailView()) {
                       EmptyView()
                   }
               }
            
            // 其他非跳转区域内容
                .contentShape(Rectangle())
                .onTapGesture {}
        }
    }
}

该方案通过给非目标区域绑定空点击事件的方式，提前消费掉透传的点击手势，避免点击事件冒泡到NavigationLink上触发意外跳转。

• 不要直接将带可见内容的NavigationLink作为.background、.overlay的子视图嵌入List行内，List会自动识别行内的导航链接，默认将整行设置为可点击区域，即使手动把链接尺寸设为0也可能触发热区扩展
• 不要给非点击区域直接设置.allowsHitTesting(false)，该属性会导致区域内其他可交互元素（按钮、输入框、滑动手势等）全部失效，使用空onTapGesture拦截的方式不会影响子视图原有交互
• 如果Cell内部本身有按钮、切换器等其他可交互元素，优先选择方案1实现，避免手势冲突

内容的提问来源于stack exchange，提问作者Ctibor Šebák