ButtonStyleを使ってWidgetのボタン背景色を透明にする

概要

iOS 17〜Widgetにインタラクティブな機能が追加され、トリガーとしてButtonやToggleを実装するケースが増えたと思います。
WidgetのViewはSwiftUIを使用して実装するのでiOSなどと同じように色や背景を変更できそうですが単純ではなかったので、紹介したいと思います。

環境

iOS 17.0
​

ボタン背景を透明にする方法

ここではWidgetのボタン背景を透明にする方法について紹介したいと思います。
サンプルとしてボタンをタップしたら日付を変更するWidgetを作成します。

ボタンの実装は以下の通りです。

Button(intent: DecrementDateIntent()) {
    Image(systemName: "chevron.left")
}

特に背景色を定義しているわけではないですが、デフォルトで色が付いています。

ButtonStyleを使って背景色を透明にする

単純に.background()で色を定義して消せるかと思いましたが消せませんでした。
代わりにButtonStyleを使用することで背景色を透明にすることができました。

struct ClearBackgroundButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color.clear)
            .cornerRadius(0)
    }
}

後は背景色を透明にしたいボタンに.buttonStyleをあてるだけできます。

Button(intent: DecrementDateIntent()) {
    Image(systemName: "chevron.left")
}
.buttonStyle(ClearBackgroundButtonStyle())

これで透明にできます。