[SwiftUI]アラートの使い方①〜Alert構造体〜

スポンサーリンク
SwiftUI
スポンサーリンク

ユーザーに対して、警告や確認をしたい際に使うのがアラートです。

この記事では、アラートの表示するための事前準備としてAlert構造体について解説します。

次の記事「[SwiftUI]アラートの使い方②〜アラートの表示〜」

スポンサーリンク

Alert構造体

Alert構造体は、アラートの設定項目(本文、ボタンなど)をまとめておくものです。

アプリ内で複数のアラートを使う場合に、あらかじめ違うアラートを用意しておけるのは便利です。

Alert構造体には、ボタンが「1つのタイプ」と「2つのタイプ」があります。

ボタンが1つ

コード, プログラミング, ハッキング, Html, Web, データ, デザイン, 開発, プログラム

主に警告や注意をするときに使うアラートです。

イニシャライザは次ようになっています。

Alert ( title: , message: , dismissButton )
  • title: アラートのタイトルを表示するテキスト
  • message: 表示するメッセージ本文のテキスト
  • dismissButton: アラートを閉じるボタン。Alert.Button構造体というアラート用のボタンを指定する

titleとmessageはアラートに表示されるメッセージを扱う引数です。

最後のdismissButtonは、どのようなボタンにするかを指定する引数です

指定できるのは、次のようなものがあります。

  • Alert.Button.default(label: , action( ) { } )
    デフォルトの表示スタイル。青色。
  • Alert.Button.destructive(label: , acton( ) { } )
    破滅的な変更用(警告や注意など)のスタイル。赤色。
  • Alert.Button.cancel( label : , action( ) { ])
    キャンセル用のスタイル。青色・ボールド色。左側固定。

それぞれは目的ごとに使い分けてください。

また、引数は普通のButtonと同じで、ボタンを表すラベルと処理を記述するアクションです。

以下は警告を表示する例です。

   Alert(
                 title: Text("警告"),
                  message: Text("この変更を行っていいですか?"),
                  dismissButton: .destructive(Text("OK")) {
                          //処理
                  }
           )

dismissButtonはAlert.Button構造体が前提なので、Alert.Buttonを省略することができます。

上のアラートを実際に表示すると次のようになります。

ボタンが2つ

コード, コーディング, Web, 開発, ウェブ開発者, Web 開発, 技術, プログラミング コード

ボタンが2つのタイプは、イニシャライザで設定するボタンが増えます。

Alert ( title, message, primaryButton, secondaryButton )
  • primaryButton: 左側のボタン
  • secondaryButton: 右側のボタン

ボタンが1つのタイプと同じように、左からボタンをAlert.Button構造体で指定します。

ただ、Alert.Button.cancel ( )は例外として、必ず左側になるので注意してください。

(キャンセルのような選択肢は左側になるような方針だから)

以下は、先程の「警告」をアレンジした例です。

Alert(
                title: Text("警告"),
                  message: Text("この変更を行っていいですか?"),
                  primaryButton:  .destructive(Text("NO")) {
                    //処理
                  },
                  secondaryButton: .default(Text("OK"))
            )

補足なのですが、Alert.Buttonのメソッドのactionは省略することができます。

まとめ

アラートには、いくつか設定が必要になります。

Alert構造体は、そのようなアラートの設定をまとめておくコンテナです。

Alert構造体ができたら、あとはアラートを表示するのみです。

次の記事では、Alert構造体を利用して、アラートの表示する方法を解説します。

次の記事「[SwiftUI]アラートの使い方②〜アラートの表示〜」

参考

コメント

タイトルとURLをコピーしました