SwiftUI ZStack内使用offset后onTapGesture不响应如何解决？

问题原因 #

SwiftUI 的 offset 修饰符仅调整视图的渲染位置，不会修改视图的实际布局框架，所以你把 HStack 从 ZStack 底部偏移到顶部后，它的点击命中测试区域还是留在原来的底部位置，点击顶部渲染出来的按钮自然无法触发手势。

解决方案 #

方案1（推荐）：调整布局逻辑，避免使用硬编码 offset #

你原先硬编码的 offset(y: -770) 本身不兼容不同屏幕尺寸，换成 ZStack 分层对齐的方案更合理，视图实际布局位置和渲染位置一致，手势可以正常触发，修改后的代码如下：

struct MapScreen: View {
    // 自行补充代码中缺失的 @State 变量，比如 $locations、$presentSearchView
    var body: some View {
        NavigationView {
            ZStack {
                // 地图放在最底层
                MapView(locations: $locations)
                    .edgesIgnoringSafeArea([.top, .bottom])
                
                // 顶部搜索栏HStack，默认对齐ZStack顶部，通过padding调整间距
                HStack(spacing: 10) {
                    SearchBar()
                        .padding(.leading, 5)
                        .onTapGesture {
                            print("search pressed")
                        }
                    ActivateButton()
                        .onTapGesture {
                            print("activate pressed")
                        }
                }
                .zIndex(2)
                .padding(.top, 10) // 可自行调整顶部间距
                
                // 底部导航栏，对齐ZStack底部
                BottomNavBar()
                    .zIndex(1)
                    .edgesIgnoringSafeArea(.bottom)
                    .padding(.bottom, 5) // 替换原先的offset(y:35)，可自行调整
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .fullScreenCover(isPresented: $presentSearchView, content: {
                SearchView()
             })
        }
    }
}

方案2：强制指定命中测试区域 #

如果你一定要保留offset的写法，只需要给偏移后的HStack添加contentShape修饰符，手动指定命中识别区域即可：

HStack(spacing: 10) {
    // 原有内部代码不变
}
.zIndex(2)
.offset(y: -770)
.contentShape(Rectangle()) // 新增这行即可解决手势失效问题

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