SwiftUI：如何让Button Label中的指定子视图不可点击？

你遇到的核心问题是：Button会将整个Label区域视为可点击范围，直接给Circle添加.allowsHitTesting(false)或.disabled(true)无法阻止事件透传到Button，因此点击Circle仍会触发按钮action。以下是两种符合你需求的解决方案：

方案一（iOS 15+，保留原有代码结构） #

利用.hitTest(_:)修饰符自定义Button的点击响应区域，同时保持Circle在原HStack布局中：

struct ContentView: View {
    @State private var circleGlobalFrame: CGRect = .zero
    
    var body: some View {
        Button(action: {
            print("按钮被触发")
        }) {
            HStack {
                Circle()
                    .frame(width: 80)
                    .background(
                        // 获取Circle的全局坐标系位置
                        GeometryReader { geoProxy in
                            Color.clear
                                .onAppear {
                                    circleGlobalFrame = geoProxy.frame(in: .global)
                                }
                                .onChange(of: geoProxy.frame(in: .global)) { newFrame in
                                    circleGlobalFrame = newFrame
                                }
                        }
                    )
                Text("Hello, World!")
            }
        }
        .hitTest { point in
            // 仅当点击位置不在Circle范围内时，才响应按钮点击
            !circleGlobalFrame.contains(point)
        }
    }
}

方案二（代码更简洁，视觉布局一致） #

通过Overlay重构布局，将Circle移出Button的Label区域，视觉上保持原位置不变：

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("按钮被触发")
        }) {
            Text("Hello, World!")
                .padding(.leading, 90) // 预留Circle的宽度空间
        }
        .overlay(
            Circle()
                .frame(width: 80)
            , alignment: .leading
        )
    }
}

方案特点 #

• 方案一：保留Circle在Button Label的HStack结构中，通过精确的坐标判断控制点击区域，适合需要维持原有代码结构的场景；
• 方案二：代码更简洁，无需额外状态管理，仅通过布局调整实现需求，适合对代码结构要求不高的场景。

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