SwiftUI 带material背景的视图激活contextMenu时内容变暗如何解决

这是iOS 15+ SwiftUI的系统材质渲染Bug：触发上下文菜单时，系统会默认给源视图叠加一层半透明暗色遮罩，用于突出显示弹出的菜单选项。但浅色模式下material材质的半透明混色计算逻辑存在异常，系统遮罩会直接和material的底层渲染参数错误叠加，最终导致整个视图异常变暗。深色模式下material本身的基础色调偏暗，遮罩叠加后的视觉差异极小，因此看起来运行正常。

以下方案均兼容iOS 15+，可按需选择：

• 方案1：添加compositingGroup()修饰符
  将material背景的视图打包为独立渲染层，系统遮罩会作用于整个组合层，不会和内部材质单独混色：

  Text("Press for Context Menu")
      .padding()
      .background(.regularMaterial)
      .compositingGroup() // 新增这一行即可
      .contextMenu {
          Button("Option 1", action: {})
          Button("Option 2", action: {})
          Button("Option 3", action: {})
      }
  

• 方案2：将contextMenu修饰符移到外层透明容器
  给原视图套一层无样式的父容器，让系统遮罩作用于普通容器，避免直接接触material材质：

  ZStack {
      Color(.systemBlue).ignoresSafeArea()
      // 外层透明容器
      VStack {
          Text("Press for Context Menu")
              .padding()
              .background(.regularMaterial)
      }
      .contextMenu {
          Button("Option 1", action: {})
          Button("Option 2", action: {})
          Button("Option 3", action: {})
      }
  }
  

• 方案3：显式指定material的裁剪形状
  给material背景显式指定形状参数，强制系统走更稳定的材质渲染逻辑：

  Text("Press for Context Menu")
      .padding()
      .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 8)) // 显式指定形状
      .contextMenu {
          Button("Option 1", action: {})
          Button("Option 2", action: {})
          Button("Option 3", action: {})
      }
  

• 方案4：用自定义半透明背景替代material
  如果不需要严格遵循系统material的动态毛玻璃效果，可以用半透明系统色替代，完全规避材质渲染bug：

  Text("Press for Context Menu")
      .padding()
      .background(Color(UIColor.secondarySystemBackground).opacity(0.9))
      .contextMenu {
          Button("Option 1", action: {})
          Button("Option 2", action: {})
          Button("Option 3", action: {})
      }
  

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