List中.background内的NavigationLink触控区域不符合预期如何解决

问题根因 #

• EmptyView的固有内容尺寸为0，默认仅会响应自身固有尺寸范围内的点击事件，就算添加frame修饰符也默认不会将透明区域纳入交互响应范围
• SwiftUI默认只会根据视图的可见内容判定可点击区域，透明的空白区域不会被计入响应范围

修复方案 #

你需要主动给EmptyView设置撑满父容器的尺寸，同时用contentShape定义整个矩形范围为可交互区域，修改后的代码如下：

var body: some View {
    List {
        Section {
            HStack {
                Image(systemName: "checkmark")
                    .frame(width: 30, height: 30, alignment: .center)
                    .opacity(selected ? 1 : 0)
                Text("TEST")
                Spacer()
            }
            .onTapGesture {
                selected.toggle()
            }
            .background(
                NavigationLink(destination: WifiView()) { 
                    EmptyView()
                        // 撑满background的整个范围
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        // 定义整个矩形区域都响应交互
                        .contentShape(Rectangle())
                }
                .disabled(isPad)
            )
        }
    }
}

补充注意事项 #

• 如果你同时需要响应HStack的onTapGesture和NavigationLink的跳转，注意二者的手势优先级，默认会先触发外层的onTapGesture再执行跳转，你可以根据业务需要给其中一个手势添加.highPriorityGesture修饰符调整优先级
• 若仅需兼容iOS 16+，推荐使用NavigationStack配合navigationDestination实现路由跳转，不需要将NavigationLink藏在background中，可避免类似的交互冲突问题

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