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

この記事からわかること

  • SwiftButtonとは?
  • 構造書式使い方
  • actionプロパティ@State

index

[open]

\ アプリをリリースしました /

ふるログ

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

無料posted withアプリーチ

Swift UIのButton構造体とは?

struct Button<Label> where Label : View

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

実際に表示させるにはイニシャライザを使ってインスタンス化して使用します。その際には複数あるイニシャライザによって書式が異なりますが基本的な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を使って定義するので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)

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

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

searchbox

スポンサー

ProFile

ame

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

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

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

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

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index