iOS17 Widget中带Intent的SwiftUI Button默认背景去除方法

在iOS 17 Widget中使用带Intent的Button时，系统默认会应用突出样式的蓝色背景，以下是几种有效的去除方法：

方法一：使用无样式按钮样式 #

直接为Button添加PlainButtonStyle，可完全移除默认背景样式：

var body: some View {
    if #available(iOS 17.0, *) {
        Button(intent: TodoCheckInIntent(todoId: todo.id)) {
            Text("hello")
        }
        .frame(width: 65, height: 21)
        .buttonStyle(PlainButtonStyle())
    } else {
        todoSubView
    }
}

方法二：设置透明背景+无边框样式 #

通过设置背景为透明，并搭配borderless按钮样式，也能消除蓝色背景：

var body: some View {
    if #available(iOS 17.0, *) {
        Button(intent: TodoCheckInIntent(todoId: todo.id)) {
            Text("hello")
        }
        .frame(width: 65, height: 21)
        .background(Color.clear)
        .buttonStyle(.borderless)
    } else {
        todoSubView
    }
}

方法三：自定义按钮样式（保留点击反馈） #

如果需要保留点击时的视觉反馈但去掉蓝色背景，可以自定义ButtonStyle控制不同状态的外观：

// 自定义透明按钮样式，点击时显示浅灰色反馈
struct TransparentIntentButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? Color.gray.opacity(0.1) : Color.clear)
    }
}

// 在Widget中使用
var body: some View {
    if #available(iOS 17.0, *) {
        Button(intent: TodoCheckInIntent(todoId: todo.id)) {
            Text("hello")
        }
        .frame(width: 65, height: 21)
        .buttonStyle(TransparentIntentButtonStyle())
    } else {
        todoSubView
    }
}

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