如何在SwiftUI中让空白区域可点击

[hunter-ji]

问题

在SwiftUI中，经常会使用到VStack和HStack，但是会遇到存在空白区域的情况，只有文字可以响应点击事件，而空白区域无法响应点击事件。

下面有两个案例：

// 案例1
HStack {
  Text("logout")
}
.onTapGesture {
    print("tap")
}

// 案例2
Button(action: {
    print("tap")
}, label: {
    HStack {
        Text("logout")
        Spacer()
    }
})

这两个案例都是点击事件，但是其实空白处都无法点击。

解决

给HStack或VStack添加.contentShape(Rectangle())即可。但是，比如第一个案例中，HStack仅有Text，需要添加Spacer()才能使得空白区域响应点击事件。

那么解决问题后的代码如下：

// 案例1
HStack {
  Text("logout")
  Spacer() // 填充空白区域
}
.contentShape(Rectangle()) // 新增
.onTapGesture {
    print("tap")
}

// 案例2
Button(action: {
    print("tap")
}, label: {
    HStack {
        Text("logout")
        Spacer()
    }
  .contentShape(Rectangle()) // 需要注意的是，必须紧跟HStack，在Button上是无效的
})