SwiftUI中空文本Button点击事件不触发的原因是什么？

问题原因 #

这个现象是SwiftUI默认的点击交互判定规则导致的：

• Button 可点击的响应范围默认只包含其内部label内容的固有尺寸，你后续给Button添加的.frame修饰符只是调整了Button的布局占位大小，默认不会被纳入点击响应区域。
• 你使用Text("")作为label时，空文本的固有宽高都是0，相当于Button没有可点击的内容区域，所以点击外层的红色圆形区域完全不会触发事件。
• 当你给Text添加任意字符后，Text获得了非零的固有尺寸，对应区域就可以响应点击了。
  而播放按钮可以正常触发，是因为它的label是带内容的Image，本身就有非零的固有尺寸，所以点击在Image覆盖的区域就会触发事件。

解决方法 #

有两种常用的方案可以让整个55x55的圆形区域都响应点击：

• 替换空Text为填充式的空白内容，比如Color.clear，Color类型会自动撑满父容器的可用空间，天然对应你设置的frame大小：

Button(action: {
    print("record clicked")
}) {
    Color.clear
}
.frame(width: 55, height: 55)
.background(Color.red)
.cornerRadius(9999)

• 手动指定Button的可点击形状，添加contentShape修饰符即可让整个frame区域都响应点击：

Button(action: {
    print("record clicked")
}) {
    Text("")
}
.frame(width: 55, height: 55)
.contentShape(Rectangle())
.background(Color.red)
.cornerRadius(9999)

内容的提问来源于stack exchange，提问作者damd