SwiftUI 使用Color巧妙实现「响应区域的扩大」及「可拦截点击事件的透明背景」

照应区域的扩展

现在有个Text，需求给它添加一个点击工作，代码如下：

struct PlaygroundView: View {
    var body: some View {
        VStack {
            Text("Tap me")
                .background(.yellow)
                .onTapGesture {
                    print("what?")
                }
            Spacer()
        }
        .padding(.top, 20)
    }
}

效果如下：

可以没问题，但由于Text太小，好难点到，那么怎样不替换Text及其方位的前提下，扩展其点击区域？

要完结这个需求有许多种方法，例如设置Text的frame，可是这样的话还得修正offset，其他假设是杂乱页面的话，很有可能会影响到其他子View，总的来说就是比较费事。

此处介绍一种超简略的方案：运用Color。

Talk is cheap. Show me the code:

struct PlaygroundView: View {
    var body: some View {
        VStack {
            Text("Tap me")
                .background(.yellow)
                .background {
          Color.red.opacity(0.000000001)
            .frame(width: 150, height: 150)
        }
                .onTapGesture {
                    print("what?")
                }
            Spacer()
        }
        .padding(.top, 20)
    }
}

这里是给Text添加了一个宽高为150、靠近完全透明的Color当时布景，这样就能完结点击区域的扩展了：

加点透明度可以看到点击区域实践为：

可能会有人觉得疑问，为什么设置个这么小的透明度，直接设置为0或许直接运用clear不就好了么？

这是由于假设设置为0或许运用clear，系统界说该区域为隐藏，是无法交互的（手势无法照应）。

但经过实测，只需透明度设置在0.000000001 ~ 0.001这个区间内，在屏幕上是无法看到的（大于0.001就会依稀看得到），但实则存在，而且具有交互性的。

运用这个特性，完全不必移动Text，就能完结其点击区域的扩展了！

可阻挠点击工作的透明布景

这个特性除了可以扩展点击区域，还可以给透明布景的HUD，完结点击布景主动封闭的效果。

示例代码如下：

struct PlaygroundView: View {
    @State var isShowPrompt = false
    var body: some View {
        VStack {
            Button {
        isShowPrompt.toggle()
      } label: {
        Text("Hello, World!")
      }
      .opacity(isShowPrompt ? 0 : 1)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay {
                if isShowPrompt {
                    PromptView()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background {
                            Color.red.opacity(0.000000001)
                                .onTapGesture {
                                    isShowPrompt = false
                                }
                        }
                }
            }
        }
    }
}

完结效果：

PS：额定添加了一些动画效果，而且在上下各自添加一个按钮，可以看到当HUD存在时是点击不到这些按钮的。

再看看透明度设置为0或许运用clear会发生什么：

PS：HUD的区域是掩盖全屏的，但会发现点击工作直接穿透到下一层了，上下按钮都能被点击。

总结

运用非clear的Color，只需透明度设置在0.000000001 ~ 0.001这个区间内就能“完全透明”，而且具有交互性，运用该特性可以自界说一块透明的可点击区域。