SwiftUI按钮被视图遮挡问题

问题描述

在 SwiftUI 中，按钮无法点击通常是因为它被其他视图遮挡，或者 ZStack 中的视图层级导致它不在最前。

例如，我在《方方块》游戏结尾处，添加散花动画时，存在动画高度过高遮挡按钮的情况。

解决方案

1、调整 ZStack 视图层级

确保按钮位于 ZStack 的最上层：

ZStack {
    // 动画视图
    FlowerAnimationView()
    
    // 确保按钮在最前面
    VStack {
        Spacer()
        Button("重新开始") {
            restartGame()
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .clipShape(Capsule())
        .zIndex(1) // 设置更高的 zIndex
    }
}

2、使用 .allowsHitTesting(false) 让动画不影响触摸

如果动画视图只是视觉效果，不需要响应点击事件，可以加上 .allowsHitTesting(false)：

FlowerAnimationView()
    .allowsHitTesting(false) // 让动画不阻挡点击

这样，动画仍然可见，但不会干扰按钮的点击。

3、使用 .simultaneousGesture 处理手势冲突

如果动画视图有拖动等手势，可以用 .simultaneousGesture 确保按钮优先：

FlowerAnimationView()
    .simultaneousGesture(TapGesture().onEnded { })
    .allowsHitTesting(false)

总结

这几种方法可以结合使用，通常 .allowsHitTesting(false) 是最直接的解决方案。