ZStack上层显示全屏Popup时如何禁用下层VStack内的可点击按钮

问题根因：你遇到的点击穿透问题和zIndex配置无关，根源出在Popup组件内的全屏Rectangle设置了.allowsHitTesting(false)：这个配置会让该视图完全忽略所有用户交互，点击事件会直接穿透到层级更低的VStack上，哪怕弹窗已经完全挡住了下层内容。

你可以选择任意一种方案解决：

• 方案1：修改Popup内的遮罩配置（最直接）
  直接移除Popup中Rectangle的.allowsHitTesting(false)修饰符，或者将参数改为true。全屏遮罩会接住所有点击事件，不会再透到下层。
  修改后的Popup代码示例：

  //Popup
  GeometryReader { geo in
      ZStack {
          Rectangle()
          .fill(Color.red.opacity(1.0))
          .frame(width: geo.size.width, height: geo.size.height)
          // 删掉下面这行，或者把false改成true
          // .allowsHitTesting(false)
          .zIndex(1)
          
          Text("Content")
      }
  }
  

• 方案2：给下层VStack加禁用状态绑定（最稳妥）
  直接给下层的VStack添加disabled修饰符，和showPopup状态绑定，弹窗显示时直接禁用下层所有控件的交互，不受上层弹窗配置影响。
  修改后的MainView代码示例：

  //MainView
  ZStack {
      if self.showPopup {
          Popup()
          .zIndex(2)
      }
  
      VStack {
          Spacer()
          Button(action: {
          }) {
              Text("Click")
          }  
      }
      .zIndex(1)
      // 新增这行，弹窗显示时禁用下层所有交互
      .disabled(self.showPopup)
  }
  

• 方案3：给Popup外层统一加点击拦截
  如果不想修改Popup内部的代码，可以直接在引入Popup的位置加.allowsHitTesting(true)，强制弹窗层拦截所有点击事件：

  if self.showPopup {
      Popup()
      .zIndex(2)
      .allowsHitTesting(true)
  }
  

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