Chapter 10無料公開

【Part9】アラートとダイアログを使ってみよう。

Rikuto Sato
Rikuto Sato
2022.11.06に更新


この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. アラートを表示させる
    ボタンを押したら、アラートを表示させたいので、ボタンを押したら呼ばれるところでisShowAlerttrueに変更しましょう。

    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. ダイアログを表示させる
    アラートと同じく、ボタンを押したら、ダイアログを表示させたいので、ボタンを押したら呼ばれるところでisShowDialogtrueに変更しましょう。

    Button {
        isShowDialog = true
    } label: {
    
    追記する場所

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

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