[SwiftUI]Button(ボタン)の押している(isPressed)間のスタイル(style)を設定

どうも、ちょげ(@chogetarou)です。

Buttonのタップ中のスタイルを設定する方法を紹介します。

方法
使用例

方法

Buttonの押している間のスタイルを設定するには、ButtonStyleを使います。

まず、ButtonStyleの構造体を用意します。

struct TapButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label //Button本体
    }
}

そして、makeBodyメソッドの「configuration.label」にボタンのスタイルを指定します。

makeBodyメソッドの引数「configuration」の「isPressed」プロパティと三項演算子を使って、押している間のボタンのスタイルを指定します。

struct TapButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label //Button本体
        ~~~isPressedと三項演算子で押している間のスタイルを設定~~~
    }
}

「configuration.isPressed」は、押している間は「true」、通常時は「false」になります。

最後に、用意したButtonStyleをButtonに適用します。

Button(・・・)
   .buttonStyle(TapButtonStyle())

ButtonStyleを使うことで、押している間のスタイルを設定することが出来ます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Tap!")
            }){
                Text("Button")
            }
            .buttonStyle(TapButtonStyle())
        }
    }
}

struct TapButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(configuration.isPressed ? Color.red : Color.blue )
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0)
            .shadow(color: configuration.isPressed ? .gray : .clear, radius: 2, x: 4, y: 4)
    }
}