SwiftUI按钮具有扩展的触摸区域

Question

我最近开始使用SwiftUI，发现Button的点击区域总是超出了本身的范围，这导致了我的一些UI问题。以下是我在Playground中的示例代码（使用Xcode 13.3）。同样的情况也可以在iOS设备上观察到：

struct TestView: View {
    var body: some View {
        VStack {
            Button("Tap me") {
                print("tap")
            }
            .background(Color.yellow)
        }
        .frame(width: 300, height: 500)
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: TestView())

这展示了按钮周围的点击区域有多大：

首先，我在文档中找不到任何关于此的信息。如果我漏掉了什么，请问是否可以指向一个页面/WWDC视频或者评论中解释或提到这种行为？

其次，根据此处和其他论坛中的多个讨论，您应该使用 contentShape() 修改器来更改此行为。因此，我将上述代码修改如下：

Button("Tap me") {
    print("tap")
}
.background(Color.yellow)
.contentShape(Rectangle())

这将产生以下结果：

虽然有所不同，但它微不足道，不符合我的需求。我需要的是触摸区域仅延伸到按钮的可见边界。我尝试使用 scale() 和 inset() 修改形状，两者都有点效果。似乎 contentShape() 修饰符会将触摸区域扩展到提供的形状之外。可以通过提供自定义形状进行测试。形状在 path(in:) 函数中接收按钮的可见大小作为矩形。从那里返回的任何路径，contentShape() 都会添加自己的魔法数字。我能想到的唯一解决方案是创建自己的形状来抵消那些魔法数字。还有其他解决方案吗？一些更有经验的 SwiftUI 用户可以分享一下他们的想法吗？

- tompitt

---

当您点击时，会出现一个圆圈，它是一个事件生成区域（即“手指点”），它覆盖了按钮，因此按钮会做出反应 - 这是预期的，iOS不像macOS鼠标热1px光标点。 - Asperi

请查看此答案：https://developer.apple.com/forums/thread/685794 - Fahim Parkar

@Asperi 我不同意。UIKit按钮不会表现出那种行为。而它目前的方式，当你将按钮排列在彼此靠近或靠近其他可点击视图时，会导致问题。 - tompitt

@FahimParkar 谢谢您的建议。我已经尝试过了。他们建议将 contentShape() 与 onTapGesture() 结合使用。实际上，添加一个轻拍手势识别器似乎会在按钮周围添加另一个可点击区域，其大小与没有 contentShape() 修改器的普通 Button 相同。 - tompitt

Answer 1

为什么不尝试使用buttonStyle的.borderedProminent。这里有一篇很棒的文章swiftwithmajid，讲解了 SwiftUI Button 的相关内容。它帮助我解决了一个按钮问题。

- cole

---

样式对于点击区域没有帮助，很遗憾。它仍然扩展到按钮周围。 - tompitt

你尝试过在按钮上禁用动画吗？ - cole