SwiftUI按钮在使用叠加层后无法点击

Question

我有一个带有叠加层的按钮，但它无法点击。如果我去掉叠加层，它就可以点击了。如何使其在有叠加层的情况下也能正常工作？

Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                UIPasteboard.general.string = viewModel.promoCode?.code ?? ""
            } label: {
                HStack {
                    Text(viewModel.promoCode?.code ?? "")
                        .foregroundColor(Color(UIColor.uStadium.primary))
                        .font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
                        .padding(.leading, 20)
                    Spacer()
                    Image("copyIcon")
                        .foregroundColor(Color(UIColor.uStadium.primary))
                        .padding(.trailing, 20)
                }

            }
            .overlay (
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color(UIColor.uStadium.primary), style: StrokeStyle(lineWidth: 2, dash: [10]))
                    .frame(height: 42)
                    .background(Color(UIColor.uStadium.primary.withAlphaComponent(0.2)))
            )
            .frame(height: 42)
            .cornerRadius(8)

- tHatpart

---

如果您将叠加层放在HStack上而不是按钮上会发生什么？ - jnpdx

@jnpdx运行完美。 - tHatpart

Answer 1

另一种解决方案是在覆盖层（overlay）内的视图添加 .allowsHitTesting(false) 修饰符。

之所以触摸功能不起作用，是因为覆盖修饰符会在当前视图前面添加一个次要视图。因此，当用户点击按钮时，实际上是在点击被覆盖的视图。 allowsHitTesting(false) 可以阻止视图接收任何类型的点击，而所有的点击事件都会自动穿过视图传递到其后面的内容。 简单示例：

struct ContentView: View {
    var body: some View {
        Button {
            print("dd")
        } label: {
            Image(systemName: "house").resizable().frame(width: 50, height: 50)
        }
        .overlay (
            RoundedRectangle(cornerRadius: 8).allowsHitTesting(false)
        )
    }
}

触摸功能正常工作！

- Seungjun