SwiftUI如何实现可独立点击的披萨按钮（含中心按钮）

问题根源是你用的每个按钮默认点击区域是整个215x215的正方形frame，上层按钮完全覆盖了下层，所以只有最上面的能响应点击。解决思路是给每个按钮自定义扇形点击区域，让点击范围只限定在各自的扇形区域内，这样按钮就不会互相遮挡了。

实现步骤 #

1. 自定义扇形路径：针对左上、右上、右下、左下四个扇形，分别创建对应的Path
2. 给每个按钮设置contentShape，将点击区域绑定到对应的扇形路径
3. 中心按钮保持圆形点击区域即可

完整代码 #

import SwiftUI

struct PizzaButtonView: View {
    // 定义披萨按钮的尺寸常量
    private let outerDiameter: CGFloat = 215
    private let centerDiameter: CGFloat = 87
    
    var body: some View {
        VStack {
            HStack {
                Button(action: {}) {
                    Text("Menu")
                        .frame(width: 88, height: 44)
                        .background(.gray)
                        .cornerRadius(12)
                }
                Spacer()
                Button(action: {}) {
                    Text("Settings")
                        .frame(width: 88, height: 44)
                        .background(.gray)
                        .cornerRadius(12)
                }
            }
            .padding(.horizontal, 40)
            
            ZStack {
                // 左上扇形按钮（对应left_btn）
                Button(action: { print("1") }) {
                    Image("left_btn")
                        .resizable()
                        .scaledToFit()
                        .frame(width: outerDiameter, height: outerDiameter)
                }
                .contentShape(.interaction, sectorPath(startAngle: .degrees(90), endAngle: .degrees(180)))
                
                // 右上扇形按钮（对应top_btn）
                Button(action: { print("2") }) {
                    Image("top_btn")
                        .resizable()
                        .scaledToFit()
                        .frame(width: outerDiameter, height: outerDiameter)
                }
                .contentShape(.interaction, sectorPath(startAngle: .degrees(0), endAngle: .degrees(90)))
                
                // 右下扇形按钮（对应right_btn）
                Button(action: { print("3") }) {
                    Image("right_btn")
                        .resizable()
                        .scaledToFit()
                        .frame(width: outerDiameter, height: outerDiameter)
                }
                .contentShape(.interaction, sectorPath(startAngle: .degrees(-90), endAngle: .degrees(0)))
                
                // 左下扇形按钮（对应bottom_btn）
                Button(action: { print("4") }) {
                    Image("bottom_btn")
                        .resizable()
                        .scaledToFit()
                        .frame(width: outerDiameter, height: outerDiameter)
                }
                .contentShape(.interaction, sectorPath(startAngle: .degrees(-180), endAngle: .degrees(-90)))
                
                // 中心圆形按钮
                Button(action: { print("5") }) {
                    Image("center_btn")
                        .resizable()
                        .frame(width: centerDiameter, height: centerDiameter)
                }
                .contentShape(.interaction, Circle())
            }
        }
        .background(.red)
    }
    
    // 生成扇形路径的工具方法
    private func sectorPath(startAngle: Angle, endAngle: Angle) -> Path {
        Path { path in
            let radius = outerDiameter / 2
            // 从圆心开始绘制
            path.move(to: CGPoint(x: radius, y: radius))
            // 绘制圆弧
            path.addArc(center: CGPoint(x: radius, y: radius),
                        radius: radius,
                        startAngle: startAngle,
                        endAngle: endAngle,
                        clockwise: false)
            // 回到圆心，闭合路径
            path.closeSubpath()
        }
    }
}

#Preview {
    PizzaButtonView()
}

代码说明 #

• sectorPath方法：根据起始角度和结束角度生成对应的扇形路径，路径从圆心出发，绘制圆弧后回到圆心，形成封闭的扇形区域
• contentShape(.interaction, path)：指定按钮的交互点击区域为自定义路径，这样只有点击到扇形范围内才会触发按钮事件，避免了上层按钮遮挡下层的问题
• 中心按钮用Circle()作为点击区域，和你的圆形图片匹配

这样修改后，四个扇形按钮和中心按钮都能独立响应各自区域的点击，不会互相干扰。

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