SwiftUI中systemName为minus的Button无法全区域响应点击求助

问题现象 #

使用minus图标的按钮无法响应整个区域的点击，只有精准点击图标本身时才会触发操作；但换成plus图标后，整个按钮区域都能正常响应点击。期望实现整个按钮区域（40x40的圆角矩形）都能响应点击事件。

可复现代码 #

import SwiftUI

struct SwitchView: View {
    @State private var timeMode = 1
    var body: some View {
        HStack(spacing: 0) {
            Button {
                timeMode = 0
            } label: {
                Image(systemName: "minus") // 换成`plus`则正常，但需要保留minus
                    .resizable()
                    .scaledToFit()
                    .frame(width: 24 , height: 24, alignment: .center)
            }
            .frame(width: 40, height: 40)
            .background(Color.gray.opacity(timeMode == 0 ? 1 : 0))
            .foregroundColor(timeMode == 0 ? Color.black : Color.gray)
            .cornerRadius(20)
            .buttonStyle(.plain)
            
            Button {
                timeMode = 1
            } label: {
                Image(systemName: "plus")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 24 , height: 24, alignment: .center)
            }
            .frame(width: 40, height: 40)
            .background(Color.gray.opacity(timeMode == 1 ? 1 : 0))
            .foregroundColor(timeMode == 1 ? Color.black : Color.gray)
            .cornerRadius(20)
            .buttonStyle(.plain)
        }
        .background(Color.gray.opacity(0.3))
        .cornerRadius(20)
    }
}

struct SwitchView_Previews: PreviewProvider {
    static var previews: some View {
        SwitchView()
    }
}

效果截图 #

问题原因 #

这是因为SF Symbols中minus和plus图标的点击测试（Hit Testing）区域存在差异：

• plus图标是对称的，视觉上几乎占满了24x24的容器，其默认点击区域覆盖了整个容器范围；
• minus是横向窄图标，上下存在大量空白区域，这些空白默认不会被识别为可点击区域；
• 同时使用了.buttonStyle(.plain)，该样式下Button的点击区域由label内容的点击测试区域决定，而非外层添加的frame和背景。

解决方案 #

以下三种方法均可实现整个按钮区域响应点击：

方法一：扩展label的点击区域 #

给label内的图标容器添加全屏frame和透明背景，让点击测试覆盖整个按钮区域：

Button {
    timeMode = 0
} label: {
    Image(systemName: "minus")
        .resizable()
        .scaledToFit()
        .frame(width: 24 , height: 24, alignment: .center)
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 占满按钮区域
        .background(Color.clear) // 透明背景扩展点击范围
}
// 其余修饰符保持不变

方法二：强制设置按钮的点击形状 #

使用.contentShape(Rectangle())强制按钮的点击区域为矩形，覆盖整个外层frame：

Button {
    timeMode = 0
} label: {
    Image(systemName: "minus")
        .resizable()
        .scaledToFit()
        .frame(width: 24 , height: 24, alignment: .center)
}
.frame(width: 40, height: 40)
.background(Color.gray.opacity(timeMode == 0 ? 1 : 0))
.foregroundColor(timeMode == 0 ? Color.black : Color.gray)
.cornerRadius(20)
.buttonStyle(.plain)
.contentShape(Rectangle()) // 强制点击区域为矩形

方法三：将frame和背景移入label内部 #

把按钮的frame、背景等样式放到label中，让Button的点击区域自然覆盖整个样式范围：

Button {
    timeMode = 0
} label: {
    Image(systemName: "minus")
        .resizable()
        .scaledToFit()
        .frame(width: 24 , height: 24, alignment: .center)
        .frame(width: 40, height: 40)
        .background(Color.gray.opacity(timeMode == 0 ? 1 : 0))
        .foregroundColor(timeMode == 0 ? Color.black : Color.gray)
        .cornerRadius(20)
}
.buttonStyle(.plain)

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