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 效果就和我预期的一样了:


相关推荐
Lexiaoyao201 天前
SwiftUI 字体系统详解
swiftui·swift
1024小神2 天前
theos工具来编译xcode的swiftUI项目为ipa文件
macos·swiftui·xcode
东坡肘子3 天前
MCP 崛起与苹果的 AI 框架设想 | 肘子的 Swift 周报 #077
人工智能·swiftui·swift
YungFan4 天前
SwiftUI-国际化
ios·swiftui·swift
1024小神9 天前
xcode开发swiftui项目的时候,怎么调试ui占位和ui大小
ui·ios·swiftui
东坡肘子10 天前
给毛孩子照相 | 肘子的 Swift 周报 #076
swiftui·swift·apple
coooliang13 天前
【iOS】SwiftUI 路由管理(NavigationStack)
ios·swiftui·swift
东坡肘子17 天前
OpenAI 向美政府状告 DeepSeek:他不讲武德!| 肘子的 Swift 周报 #075
人工智能·swiftui·swift
东坡肘子24 天前
期待与失望的循环:苹果的 AI 困境与韧性 | 肘子的 Swift 周报 #074
人工智能·swiftui·swift
刘架构1 个月前
第1章:项目概述与环境搭建
ios·swiftui