SwiftUI Button添加frame后contentShape失效问题求助

当你给Button内部视图添加.frame修饰符后，这个FrameView会成为内容层级的最外层可交互视图。SwiftUI的点击测试逻辑会优先识别最外层可交互视图的边界（也就是frame的矩形范围），此时即便你给Button设置了.contentShape，frame的点击拦截优先级更高，导致点击区域变成整个bounding box。而移除frame后，最外层视图是自定义形状，.contentShape会正确绑定到形状的路径，因此只有填充区域可被点击。

以下两种方法都能实现仅自定义形状填充区域可点击的需求：

方法一：让Frame不拦截点击测试 #

给frame添加.allowsHitTesting(false)，让点击事件穿透frame落到下方的自定义形状上，同时将.contentShape绑定到形状本身：

Button(action: {
    // 这里添加你的点击动作
}) {
    GKDeptStoreShape()
        .fill(.blue)
        .contentShape(GKDeptStoreShape()) // 绑定点击区域到自定义形状
        .frame(width: 200, height: 200)
        .allowsHitTesting(false) // 禁止frame拦截点击事件
}

方法二：背景+占位内容实现 #

用透明占位内容配合frame控制Button尺寸，将自定义形状作为背景，再给Button设置.contentShape：

Button(action: {
    // 这里添加你的点击动作
}) {
    // 透明占位，仅用于撑满frame空间
    Color.clear
        .frame(width: 200, height: 200)
}
.background(
    GKDeptStoreShape()
        .fill(.blue)
)
.contentShape(GKDeptStoreShape()) // 指定点击区域为自定义形状

如果你的GKDeptStoreShape需要跟随frame尺寸自适应，可以配合你的SizeCalculator修饰符同步形状尺寸，确保点击区域与显示的形状完全匹配：

struct SizeCalculator: ViewModifier {
    @Binding var size: CGSize
    
    func body(content: Content) -> some View {
        content
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            size = proxy.size
                        }
                }
            )
    }
}

// 使用示例
@State private var buttonSize: CGSize = .zero

Button(action: { /* 点击动作 */ }) {
    Color.clear
        .frame(width: 200, height: 200)
        .modifier(SizeCalculator(size: $buttonSize))
}
.background(
    GKDeptStoreShape()
        .fill(.blue)
        .frame(width: buttonSize.width, height: buttonSize.height)
)
.contentShape(
    GKDeptStoreShape()
        .frame(width: buttonSize.width, height: buttonSize.height)
)

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