SwiftUI 覆盖取消触摸答案

【问题标题】：SwiftUI overlay cancels touchesSwiftUI 覆盖取消触摸
【发布时间】：2023-04-05 01:40:01
【问题描述】：

我有一个按钮，我想在它上面放一个半透明的渐变叠加层。

Button(action: {
  print("Pressed")
}) {
  Text("Press me")
}
.overlay(
  LinearGradient(
    gradient: Gradient(colors: [.clear, Color.black.opacity(0.3)]),
    startPoint: .top,
    endPoint: .bottom
  ).disabled(true)
)

即使渐变有disabled(true)，它仍然会吃掉触摸并且不会将它们转发到实际按钮。 .allowsHitTesting(false) 提供相同的结果。

知道什么是错的吗？

注意：我知道我可以将叠加层放到Text("Press me")，但我不想要它。（这只是展示问题的示例代码）

编辑：此问题已在 Xcode 11.2 中解决 ✅

【问题讨论】：

您在 Button 前面创建了一个渐变视图，没有用户交互可以通过您的 Button。代替 .overlay ，使用 .background 或在 .overlay 之后添加 .onTapGesture。

标签： swiftui

【解决方案1】：

以下代码适用于 Xcode 11.2 / iOS 13.2

struct TestButtonWithOverlay: View {
    var body: some View {
        Button(action: {
            print("Pressed")
        }) {
            Text("Press me")
                .padding()
        }

        .overlay(
            LinearGradient(
                gradient: Gradient(colors: [.clear, Color.black.opacity(0.3)]),
                startPoint: .top,
                endPoint: .bottom
            )
            .allowsHitTesting(false) // !!! must be exactly here
        )
    }
}

struct TestButtonWithOverlay_Previews: PreviewProvider {
    static var previews: some View {
        TestButtonWithOverlay()
    }
}

【讨论】：

我可以确认这在 Xcode 11.2 中有效 ? 谢谢
FWIW 在滚动视图上覆盖视图时，这似乎不起作用；用户无法滚动。
在 TextField 上覆盖文本时不起作用。当您点击文本标签时，永远不会与 TextField 进行交互。
@AlanScarpa 请在下面查看我对您的情况的回答

【解决方案2】：

使用ScrollView 时，正确的解决方法是在ScrollView 上使用.background 内容修饰符：

https://developer.apple.com/documentation/swiftui/form/background(alignment:content:)

正如预期的那样，您的“背景”会出现在ScrollView 的内容上方。

使用创建阴影效果的示例：

有趣的说明：在模拟器上.overlay 与ScrollView 一起使用，但在物理设备上只有.background 允许滚动。

物理设备是iOS 14，模拟器是iOS 15，所以有可能是回归。虽然显然这个问题可以追溯到更早。

【讨论】：