このPartでは、アラートとダイアログの使い方について解説していきたいと思います。

アラートとダイアログはとても便利なオブジェクトです。

アラートの実装方法

アラートは、入力にエラーがあったときや、削除する際の警告などに使えます。
では、実装していきましょう。
実装方法としては、@Stateを使ってモーダル遷移と同じように実装していきます。
まずはPart9とかで適当にプロジェクトを作成してください。

1. ボタンを作成
   まずはボタンを作成します。
   var bodyの中を以下のように変更してください。

   VStack {
       Button {
       } label: {
   	Text("アラートを表示")
       }
   }
   .padding()
   

   追記する場所

   

   
   

2. 変数を宣言
   次に、アラートを表示させるかどうかのBool型の値を@Stateで宣言します。

   @State var isShowAlert = false
   

   追記する場所

   

   
   

3. .alertをつける
   アラートはButtonのモディファイアでつけます。Buttonに以下のモディファイアをつけてください。

   .alert("タイトル", isPresented: $isShowAlert) {
       Button("キャンセル") {
       }
       Button("OK") {
       }
   } message: {
       Text("ここに詳細メッセージを書きます。")
   }
   

   追記する場所

   

   
   

4. アラートを表示させる
   ボタンを押したら、アラートを表示させたいので、ボタンを押したら呼ばれるところでisShowAlertをtrueに変更しましょう。

   Button {
       isShowAlert = true
   } label: {
   

   追記する場所

   

   これで、実行してボタンを押してみると、アラートが表示されるはずです。
   
   たったこれだけでアラートが表示できました。

ダイアログの実装方法

ダイアログは、何かを選択させるときに使得るオブジェクトです。アラートと違って、3つ以上の選択肢の時にも違和感なく使えます。

では、実装していきましょう。
引き続き、アラートを表示させたプロジェクトで実装していきたいと思います。

1. ボタンを配置
   アラートを表示ボタンの下に、以下のボタンを記述してください。

   Button {
   } label: {
       Text("ダイアログを表示")
   }
   

   追記する場所

   

   
   

2. 変数を宣言
   次に、ダイアログを表示させるかどうかのBool型の値を@Stateで宣言します。

   @State var isShowDialog = false
   

   追記する場所

   

   
   

3. .confirmationDialogをつける
   ダイアログもButtonのモディファイアでつけます。Buttonに以下のモディファイアをつけてください。

   .confirmationDialog("タイトル", isPresented: $isShowDialog, titleVisibility: .visible) {
       Button("選択肢1") {
       }
       Button("選択肢2") {
       }
   } message: {
       Text("メッセージ")
   }
   

   追記する場所

   

   
   

4. ダイアログを表示させる
   アラートと同じく、ボタンを押したら、ダイアログを表示させたいので、ボタンを押したら呼ばれるところでisShowDialogをtrueに変更しましょう。

   Button {
       isShowDialog = true
   } label: {
   

   追記する場所

   

   実行して確認しましょう。
   ダイアログボタンを押すと、以下のようにダイアログが表示されると思います。
   

   これでダイアログが表示できました。実装方法はアラートとほぼ同じですね。