SwiftUI Tips: clipped()后hit testing区域不会变

使用 clipped() 裁切视图后,虽然视图的显示区域变小了,但是点击区域却还是被裁前的区域。因此如果有的视图需要裁剪后要接收触摸事件,需要做一下处理。

举例说明

假设我们把一个300x300矩形的 frame 设置成100x100:

swift 复制代码
Rectangle()
  .fill(.orange.gradient)
  .frame(width: 300, height: 300)
  // Set view to 100×100 → renders out of bounds
  .frame(width: 100, height: 100)
  .border(.blue)

从图上可以看出有边框的部分是实际UI渲染的面积,外面的部分在 frame 外的。如果我们把这个视图裁切后,把一个按钮放置在蓝色边框外,按钮其实会因为被矩形遮挡而接收不了点击事件。

swift 复制代码
struct ContentView: View {
    @State var buttonTapCount = 0
    @State var rectTapCount = 0

    var body: some View {
        VStack {
            Text("buttonTapCount:\(buttonTapCount)")
            Text("rectTapCount:\(rectTapCount)")
            Button("点击无效") {
                buttonTapCount += 1
            }
            .buttonStyle(.borderedProminent)
            
            Rectangle()
                .fill(.orange.gradient)
                .frame(width: 300, height: 300)
                .frame(width: 100, height: 100)
                .clipped()
                .onTapGesture {
                    rectTapCount += 1
                }
        }
    }
}

效果如下,可以看到点击按钮的事件没有被正确的接受,还是算到了矩形上:

修复:使用 .contentShape()

使用 contentShape 方法可以设置 view 的点击响应区域。因此在裁剪后如果加上 .contentShape() 后就可以得到正确的点击区域。

swift 复制代码
Rectangle()
    .fill(.orange.gradient)
    .frame(width: 300, height: 300)
    .frame(width: 100, height: 100)
    .clipped()
    .contentShape(Rectangle())

在设置完 contentShape 效果就和我预期的一样了:


相关推荐
林晨月2 天前
SwiftUI Color(一)
ios·swiftui
东坡肘子3 天前
更短的有效期和更长的保质期 | 肘子的 Swift 周报 #080
swiftui·swift·wwdc
躺平每一天4 天前
SwiftUI 的列表组件 - List (Trae 提升效率)
swiftui·trae
ZRD11127 天前
SwiftUI 表达式
swiftui·swift
东坡肘子10 天前
微软收紧插件、谷歌发力云端,Xcode 何去何从? | 肘子的 Swift 周报 #079
人工智能·swiftui·swift
YungFan11 天前
SwiftUI-国际化(二)
swiftui·swift
闫良呀12 天前
Swift + SwiftUI原生iOS开发 开发笔记3 – 自主模型部署并获取识别结果
ios·swiftui
YungFan15 天前
SwiftUI-MLX本地大模型开发(三)
ios·llm·swiftui
请叫我飞哥@15 天前
Apple ID授权登入
ios·swiftui