如何让Plain样式按钮响应整个框架范围内的点击？

在iOS 17.2中，.plain样式的Button默认仅识别Label内可交互元素（如示例中的Text）的点击区域。要让整个浅黄色框架都能响应点击，最直接的方法是将布局和背景样式移至Button的Label内部——因为Button的点击范围由Label的内容边界决定。

修改后的代码示例： #

struct ContentView: View {
    var body: some View {
        Button {
            print("action")
        } label: {
            Text("hello")
                .frame(maxWidth: .infinity)
                .background(Color.yellow.opacity(0.2)) // 移至Label内部
                .padding() // 移至Label内部
        }
        .buttonStyle(.plain)
    }
}

原理说明： #

原代码中，background和padding是添加在Button本身而非Label上，.plain样式下这些不属于可点击的Label区域。将它们移入Label后，整个带背景的填充区域都成为Label的一部分，Button的点击范围就会覆盖整个框架。

备选进阶方案：自定义Plain样式 #

如果需要保留原有结构，也可以自定义ButtonStyle来扩展.plain的点击区域：

struct FullWidthPlainButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity)
            .background(configuration.isPressed ? Color.yellow.opacity(0.4) : Color.yellow.opacity(0.2))
            .padding()
    }
}

// 使用方式
Button {
    print("action")
} label: {
    Text("hello")
}
.buttonStyle(FullWidthPlainButtonStyle())

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