SwiftUI：增加 tap/drag 用户交互区域

Question

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

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

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

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

Answer 1

在frame后加一个.contentShape(Rectangle())。

Answer 2

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

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

Answer 3

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

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

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

SwiftUI：增加 tap/drag 用户交互区域

SwiftUI: Increase tap/drag area for user interaction

swift

swiftui