SwiftUI：如何让自定义ButtonStyle按钮的整个区域可点击？

问题出在你把.frame、.background这类修饰符加在了Button外部，导致这些区域不属于Button的可点击范围，只有label内部的图标和文本能触发点击事件。要让整个绿色背景区域都可点击，需要把这些布局和样式修饰符移到Button的内部（label或者ButtonStyle中），确保它们属于Button的交互范围。

方案一：调整Button结构，将样式移到Label内部 #

这种方式直接修改Button的label内容，把背景和布局约束放到label里，同时保留你的自定义ButtonStyle：

Button {
    // 点击动作
} label: {
    HStack {
        Image(systemName: "plus")
            .font(.system(size: 18, weight: .bold, design: .rounded))
            .foregroundColor(Color.white)
        Text("Add a habit")
            .font(.system(size: 18, weight: .bold, design: .rounded))
            .foregroundColor(Color.white)
    }
    .frame(maxWidth: .infinity, minHeight: 80) // 自适应宽度，最小高度80，可根据需求调整
    .padding(.horizontal) // 可选，添加左右内边距优化布局
    .background(Color("AccentColor"))
    .cornerRadius(20)
}
.buttonStyle(EmptyFlatButtonStyle())

方案二：优化自定义ButtonStyle #

如果希望把样式逻辑统一放到ButtonStyle中，可以修改EmptyFlatButtonStyle，让它负责处理背景和布局，同时保证点击区域覆盖整个按钮：

struct EmptyFlatButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, minHeight: 80)
            .padding(.horizontal)
            .background(Color("AccentColor"))
            .cornerRadius(20)
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
            .animation(.bouncy(extraBounce: 0.2), value: configuration.isPressed)
    }
}

// 使用时的Button代码
Button {
    // 点击动作
} label: {
    HStack {
        Image(systemName: "plus")
            .font(.system(size: 18, weight: .bold, design: .rounded))
            .foregroundColor(Color.white)
        Text("Add a habit")
            .font(.system(size: 18, weight: .bold, design: .rounded))
            .foregroundColor(Color.white)
    }
}
.buttonStyle(EmptyFlatButtonStyle())

自适应尺寸说明 #

如果需要按钮完全根据内容自适应高度，只需去掉.frame里的固定高度参数，改用以下写法让高度由内部内容决定：

.frame(maxWidth: .infinity)

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