SwiftUI中NavigationLink无背景色时contentShape不生效问题

核心原因 #

这个现象是SwiftUI命中测试的默认规则导致的，和contentShape的添加逻辑有一定关联但并非写法完全错误：

• SwiftUI默认只会对有实际渲染内容的区域响应交互，完全透明、没有任何绘制内容的布局区域会直接透传点击事件，哪怕你用.frame、.padding把视图的布局范围撑大，只要范围内没有可渲染元素，这部分区域就不会接住点击。
• 取消注释任意一行蓝色背景代码后功能正常，本质是蓝色作为实色填充给对应视图层级补上了可渲染的内容层，父视图会接住点击事件再分发给子视图的NavigationLink，此时.contentShape(Rectangle())定义的点击区域才能被系统正常识别。
• 示例代码还存在修饰符顺序问题：把.contentShape(Rectangle())写在了.padding(.horizontal, 20)前面，而SwiftUI修饰符是从内向外生效的，这意味着contentShape定义的点击区域没有覆盖左右20pt的padding区域，进一步放大了透明区域点击失效的问题。

无额外实色背景的修复方案 #

不需要加多余的蓝色背景，只需要两步调整就能让contentShape正常生效：

1. 调整修饰符顺序，把.contentShape(Rectangle())放在所有调整布局尺寸的修饰符（.padding、.frame等）的外层，确保contentShape覆盖视图最终的完整布局尺寸。
2. 给NavigationLink的最外层加一个透明背景Color.clear，Color.clear虽然视觉上完全透明，但属于实际参与渲染的Shape类型，会被命中测试识别，不会透传点击，完全不影响原有UI效果。

修复后的可运行代码：

struct TV4: View {
    @State var tfText = ""
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack(spacing: 20) {
                    Text("Enter your name")
                        .font(.title)
                        .foregroundColor(.white)
                    
                    TextField("Name", text: $tfText)
                        .frame(maxWidth: .infinity)
                        .frame(height: 44)
                        .background(.green, in: RoundedRectangle(cornerRadius: 8, style: .continuous))
                    
                    NavigationLink(destination: {Color.red.ignoresSafeArea()}) {
                        Text("Next")
                            .foregroundColor(.white)
                            .fontWeight(.semibold)
                            .frame(maxWidth: .infinity)
                            .frame(height: 44)
                            .background(.red, in: RoundedRectangle(cornerRadius: 8, style: .continuous))
                    }
                    // 先调整布局尺寸
                    .padding(.horizontal, 20)
                    // 再定义点击区域，覆盖完整尺寸
                    .contentShape(Rectangle())
                    // 透明背景接住命中测试，无视觉影响
                    .background(Color.clear)
                    
                    Spacer()
                }
            }
            .navigationTitle("Hello")
        }
    }
}

补充：如果是iOS16+的系统，也可以直接把NavigationLink换成NavigationLink(value:label:)的新导航写法，配合NavigationStack使用，系统对新导航接口的点击区域处理会更稳定，这类透明区域点击失效的问题出现概率会低很多。

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