[SwiftUI]Buttonのタップ中の色を変えるには？

SwiftUI

2022.01.25

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

Buttonのタップしている間の色を変える方法を紹介します。

方法
使用例

方法

Buttonのタップしている間の色を変えるには、ButtonStyleを使います。

まず、自作のButtonStyleを用意します。

struct MyButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
  }

}

次に、makeBody関数の引数「configuration」のisPressedプロパティを使って、タップ中に色が変わるようにします。

struct MyButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .background(configuration.isPressed ? /*タップ中の色*/ : /*通常時の色*/)
  }

}

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

Button("Button"){
    //処理
}
.buttonStyle(MyButtonStyle())

makeBodyの引数「configuration」のisPressedは、ボタンがタップ中かどうかを判断すためのプロパティです。

タップ中であればtrue、そうでなければfalseが格納されます。

使用例

以下は、使用例です。


import SwiftUI

struct SampleView: View {
    
    var body: some View {
        VStack{
            Button("Button"){
                print("Tap")
            }
            .buttonStyle(MyButtonStyle())
        }
    }
}

struct MyButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .padding()
      .foregroundColor(.white)
      .background(configuration.isPressed ? Color.red : Color.blue)
      .cornerRadius(8.0)
  }

}