• 2022/6/13
• 3分

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

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

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Swift UIのButton構造体とは？

struct Button<Label> where Label : View

Swift UIで使用できるButtonはボタン機能を持ったビューを構築できる構造体の1つです。

実際に表示させるにはイニシャライザを使ってインスタンス化して使用します。その際には複数あるイニシャライザによって書式が異なりますが基本的な2つの引数がポイントになってきます。

2つの引数

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

書式1

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

書式2

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

書式3

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

書式1の使い方

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

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

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

書式2の使い方

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

書式2は先に処理部分をactionの後に記述します。ボタン名部分もTextを使って定義するのでif文や?:演算子などを使って出力したい値を変更させることができます。

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

if文

if (条件式) {
  処理
}else {
  処理
}

?:演算子

論理式 ? trueの値 : falseの値

書式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)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。