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

作成中です。

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

アラートの実装方法

アラートは、OKかキャンセルかの2択を選択させるときや、エラーの警告に使うことが多いです。

では、実装していきましょう。実装方法としては、モーダル遷移と似たような実装をします。

まずは、Prat9とかで適当にプロジェクトを作成してください。

STEP.1
ボタンを作る

まずは、ボタンを作ります。

var body: some View {
    Button(action: {
        
    }) {
        Text("アラートを表示")
    }
}

STEP.2
変数を宣言

次に、アラートを表示させるかさせないかの値を保持する変数を宣言します。

@State var isShowAlert = false

STEP.3
.alertをつける

Buttonのモディファイアとして、.alertをつけます。

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

コード解説
.alert("タイトル", isPresented: $isShowAlert) {

"タイトル"というところで、アラートのタイトルが指定できます。

isPresented: $isShowAlertで、isShowAlerttrueになったら中身を実行するという処理になっています。

Button("キャンセル") {
}
Button("OK") {
}

その中にボタンを記述します。上記の場合だと、キャンセルが左側、OKが右側に表示されます。3つ以上あると、縦に並びます。

STEP.4
アラートを表示させる

ボタンを押したら、アラートを表示させたいので、action: {の中で、isShowAlerttrueにしましょう。

Button(action: {
    isShowAlert = true
}) {
    Text("アラートを表示")
}

実行して、[アラートを表示]ボタンを押すとこのようにアラートが表示されると思います。

これだけで、アラートが表示されるようになりました。実装方法としては、モーダル遷移と同じような感じなので理解しやすいと思います。

ダイアログの実装方法

ダイアログもアラートと同じように、選択肢を選ばせるオブジェクトです。個人的な意見ですがアラートよりも押しにくいというかしっかりと確認して押されるイメージです。アラートと違って、3択以上にもしやすいです。

では、実装していきましょう。引き続き、先ほどのファイルに書き込んでいきたいと思います。

STEP.1
ボタンを配置

まずは、VStackで囲ってButtonを配置します。

var body: some View {
    VStack {
        Button(action: {
            isShowAlert = true
        }) {
            Text("アラートを表示")
        }
        .alert("タイトル", isPresented: $isShowAlert) {
            Button("キャンセル") {
            }
            Button("OK") {
            }
        } message: {
            Text("ここに詳細メッセージを書きます。")
        }
        Button(action: {
            
        }) {
            Text("ダイアログを表示")
                .padding()
        }
    }
}

STEP.2
変数を宣言

次に、ダイアログを表示させるかどうかの値を保持する変数を宣言します。

@State var isShowDialog = false

STEP.3
.confirmationDialogをつける

Buttonのモディファイアとして、.confirmationDialogをつけます。

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

STEP.4
ダイアログを表示させる

ボタンを押したら、ダイアログを表示させたいので、action: {の中で、isShowDialogtrueにしましょう。

Button(action: {
    isShowDialog = true
}) {
    Text("ダイアログを表示")
        .padding()
}

実行して、[ダイアログを表示]ボタンを押すとこのようにダイアログが表示されると思います。

これでダイアログの実装が完了しました。アラートとほぼ同じ実装方法なので理解できたかと思います。