SwiftUI：增加用户交互的点击/拖动区域答案

【问题标题】：SwiftUI: Increase tap/drag area for user interactionSwiftUI：增加用户交互的点击/拖动区域
【发布时间】：2019-12-07 01:28:20
【问题描述】：

我在 SwiftUI 中构建了一个自定义滑块，带有一个 20x20 的拇指拖动器。一切正常，除了点击目标很小，因为它只是 20x20 视图。我正在寻找一种方法来增加它，以使用户更容易与我的滑块进行交互。有没有办法在 SwiftUI 中做到这一点？

我尝试用Color.clear.overlay 包裹拇指并将框架设置为 60x60。如果颜色是纯色（如 red），则此方法有效，但使用 clear，点击目标似乎恢复为 20x20 的可见像素。

您可以在此 gif 上看到，即使在拇指外部单击时，我也可以拖动滑块。

但是，一旦我将颜色更改为clear，该区域就不再接收交互。

【问题讨论】：

清晰的背景在 swift UI 中是不可触摸的，不久前我问了一个类似的问题 - 我建议在它后面放一个按钮并使背景颜色与其后面的颜色相同，而不是清除
我的问题供参考：stackoverflow.com/questions/57191013/…
这里我只显示了灰色，但我想在滑块的背景中显示多种颜色，这样它就不会是纯色了。
太糟糕了 - 我认为这只是一个 swiftUI 问题，你可以提交一个错误报告，希望最终他们允许你点击清晰的东西，但现在我不确定你能做什么
另一种选择可能是添加技术上不清晰的背景，但 alpha 太低以至于不明显 - 尽管我不确定你是否能够做到100% 不明显

标签： swift swiftui

【解决方案1】：

在frame 之后添加.contentShape(Rectangle())。

【讨论】：

是的。所以在上面的例子中创建了 20x20 的圆圈。然后添加一个额外的.frame，然后添加.contentShape(Rectangle())。
我认为值得一提的是，如果您有一个框架来设置可见大小，您可以为可点击区域添加另一个框架，然后添加 contentShape。看起来很奇怪，但是如果你有 .frame.contentShape.frame 就不行，它必须是 .frame.frame.contentShape

【解决方案2】：

我确信有几种方法可以给猫剥皮，但这就是我制作一个整个区域都可点击的大按钮的方法：

Button(action: { someAction() }, label: {
                Text("OK")
                .frame(minWidth: 200)
                .contentShape(Rectangle())
                .padding()
            })
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(5.0)

【讨论】：

【解决方案3】：

我遇到了同样的问题。除了我不希望扩展的覆盖影响布局的其余部分。如果将所有内容嵌入 ZStack 并在交互式对象之前放置一个矩形，则可以控制手势的大小。有点像这样：

Rectangle().frame(width: screen.width, height: 300).opacity(0.001)
                    .layoutPriority(-1)

只需确保将不透明度设置为几乎没有，这样您就看不到它，并将布局优先级设置为 -1，这样它就不会影响视图。

【讨论】：