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

この記事からわかること

  • SwiftButtonとは?
  • 構造書式使い方
  • 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つの引数

この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+

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index