2022/6/13

【Swift UI】Button(ボタン)の構造や書式と使い方！actionやプロパティ

この記事からわかること

SwiftのButtonとは？
構造や書式、使い方
actionやプロパティ、@State

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：Button構造体

SwiftUIにおいて多用するButton構造体について使い方と役割をまとめておきます。

Swift UIのButton構造体とは？

struct Button<Label> where Label : View

Swift UIで使用できるButtonはいわゆるボタン機能を持ったビューを構築できる構造体の1つです。ユーザーのアクション(クリック)に対して任意の処理を行わせることができるのでアプリを開発する際には欠かせない構造体になります。

使用方法は他のView同様にイニシャライザを使ってインスタンス化します。Button構造体にはイニシャライザが複数存在するので書式が異なりますが、基本的な2つの引数がポイントになってきます。

2つの引数

action：クリックされた時に実行される処理部分
label：ボタンに表示させるテキストを定義

この2つがボタンを構成するために必要なポイントになります。ここからはイニシャライザというより書式で見ていきます。

書式1

Button("ボタン名") {
  処理
}

書式2

Button(action : { 処理 } ) {
  Text(ボタン名)
}

書式3

Button(action : { 処理 } , 
  label : { Text(ボタン名) }
)

書式1の使い方

Button("ボタン名") {
  処理
}

書式1は一番シンプルで分かりやすい構造です。ボタンの名前はText構造体を使わずに定義することができます。

Button("プリントボタン") {
  print("これはテストです") // デバッグエリアに出力
}

書式2の使い方

Button(action : { 処理 } ) {
  Text(ボタン名)
}

書式2は先に処理部分をactionの後に記述します。ボタン名部分もText構造体を使って定義します。

Button(action : { 
  print("これはテストです") // デバッグエリアに出力
}) {
  Text("プリントボタン")
}

書式3の使い方

Button(action : { 処理 } , 
  label : { Text(ボタン名) }
)

書式3は処理部分とラベル(ボタン名)部分を明示的に定義できる書式です。

プロパティの使い方

変数を使ってボタン名を変化させたい場合は変数の定義方法に注意が必要です。変数の定義をButton外で普通に宣言するとCannot use mutating member on immutable value: 'self' is immutable(変更できないメンバーです：'self'は不変です)といったエラーが出てしまいます。

これを防ぐために@Stateをつけて宣言します。@Stateをつけた変数は値の変化を常に監視されるようになり、変化するとViewも更新されるようになります。

@State  var check = true

var body: some View {
    Button(action: {
      check.toggle()  // 真偽値を逆転させるモディファイア
    }){
      Text(check ? "ON" : "OFF")
    }
}

条件によってボタンを無効にする

ボタンをクリックするとアクションに記述している処理が自動で実行されてしまいますが、.disabledモディファイアを使えば条件によってボタンをクリックされてもアクションの処理を行わないようにすることも可能です。

trueにすると無効に、falseにすると有効になります。

Button(action : { 
  print("これはテストです") // デバッグエリアに出力
}) {
  Text("プリントボタン")
}.disabled(true) // ボタンを無効にする

roleでボタンの役割を明示的に指定する

Button構造体のroleにdestructiveを指定するとデザインを削除ボタンとして定義することができます。

Button("Delete", role: .destructive, action: delete)

ボタンのスタイルを変更する

通常のボタンは文字だけが表示される簡素なものですがbuttonStyleモディファイアにPrimitiveButtonStyleプロトコルの任意の値を渡すことで変更できます。

.buttonStyle(BorderlessButtonStyle())

PrimitiveButtonStyle型

指定できる値はOSによって異なります。

スタイル名	概要	対応OS
DefaultButtonStyle	標準のボタンスタイル	iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+
PlainButtonStyle	背景色なし	iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+
BorderlessButtonStyle	背景色なしテキストの下に下線	iOS 15.0+, macOS 12.0+, Mac Catalyst 15.0+
BorderedButtonStyle	背景色があり、角丸の矩形	iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+
LinkButtonStyle	リンク風のボタンスタイル	iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+
CustomButtonStyle	カスタムボタンスタイル	iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+