【SwiftUI】アラートの表示と使用方法

2024.07.10
SwiftUI
alert, SwiftUI

本記事では、SwiftUIでアラートを表示する方法について解説していきます。アラートを使用することで項目の削除時の確認やデータを更新するときの最終確認を行うことができます。

1. アラートとは
2. アラートの配置
3. アラートの設定値
4. アラートの種類
- 4.1. OKとキャンセル
- 4.2. 削除とキャンセル
5. まとめ

アラートとは

アラートとは、アプリケーション上でユーザが操作を行った際に、本当にユーザが意図して行った操作であるかを確認する際に表示する画面になります。

アラートはユーザが操作を行っていた画面の上に被さるように表示されます。

例えば、登録していたデータの削除や登録済みの情報を更新する際など、操作後にデータを戻すことができない場合に最終確認としてユーザの意思を確認するために用いられることが多いです。

アラートの配置

アラートの表示には、まずアラートを表示するボタンを起きます。そしてボタンのクリックによってアラートを表示するか判断するための真偽値型の@State型変数を用意します。

初期状態では、ボタンは非表示にしておきたいためBool型の変数はfalseに設定しておきます。

struct ContentView: View {
    @State var alertOn = false
    var body: some View {
        VStack {
            Button("アラート表示"){
                alertOn = true
            }
        }
        .padding()
    }
}

配置したボタンに対して.alertモディファイアをつけることでアラートを設置することができます。

alertモディファイアの設置は、ライブラリパネルのModifiersライブラリから「Alert」をドラッグ&ドロップします。

ライブラリパネルはCommand+ Shift+LかXcode右上の+ボタンから表示することができます。

アラート設置後のソースコードは以下になります。

struct ContentView: View {
    @State var alertOn = false
    var body: some View {
        VStack {
            Button("アラート表示"){
                alertOn = true
            }.alert(isPresented: Is Presented) {
                Content
            }
        }
        .padding()
    }
}

以下でアラートへの設定値について解説していきます。

アラートの設定値

アラートの設定値には、主にisPresenedtとContentの2種類があります。

isPresentedには、前章で用意した@StateのBool型変数であるalertOnを指定してあげます。この真偽値の変数の値を参照して.alertモディファイアはアラートを表示するか否かを判断します。

Button("アラート表示"){
                alertOn = true
            }.alert(isPresented: $alertOn) {
               
            }

Contentには、Alert()を設定します。Alert()では、アラートの選択肢や表示する文言など、アラートの詳細な表示内容の設定が行えます。

Alert()には、アラートのタイトル(title)、メッセージ(message)、アラートを閉じるボタンの文言(dismissButton)を設定することができます。設定した値を入れると以下のようになります。

struct ContentView: View {
    @State var alertOn = false
    var body: some View {
        VStack {
            Button("アラート表示"){
                alertOn = true
            }.alert(isPresented: $alertOn) {
                Alert(title: Text("アラート"), message: Text("アラート時のメッセージ"), dismissButton: .default(Text("OK")))
            }
            
        }
        .padding()
    }
}

表示結果

アラートの種類

アラートは先ほど紹介したOKボタン1つの選択肢のほかに2つの選択肢を持ったボタンを設置することもできます。

OKとキャンセル

アラート表示に使用するボタンを2つに増やすためにはAlert()にactionパラメータを追加します。actionには、ボタン押下後に実現したい操作を指定することができます。

まず、アラートを閉じるために用意したdismissButtonを削除して、primaryButtonとsecondaryButtonに置き換えます。

それぞれのボタンに、OKを押したときの動作を行う.default()と操作のキャンセルをするときに設定したい.cancel()を以下のように設定します。

なお、primaryButtonとsecondaryButtonのどちらにOKやキャンセルを設定しても問題ありませんが、.cancelを設定した方のボタンが左側に表示されるようになります。

また、actionへのパラメータを空にしておくとアラートを閉じるだけの操作となります。

.alert(isPresented: $alertOn) {
                Alert(title: Text("確認"), message: Text("入力内容を確定しますか。"), 
　　　　　　　　　　　　　　　　　　　primaryButton: .default(Text("OK"),action: {}),
                    secondaryButton: .cancel(Text("キャンセル"), action: {}))
            }

今回は、例としてテキストボックスに文字列を入力し、「入力内容確定」ボタンを押した後に下に用意したテキストエリア内に入力した文字列が反映されるというコードを作成してみます。

実際の処理としては、OKボタンを押した際に関数textComfirm()を呼び出して、入力項目に入力された変数textDataの値を下部のテキストエリア用の変数ConfirmDataに代入するという処理を行っています。

struct ContentView: View {
    @State var alertOn = false
    @State var textData = ""
    @State var ConfirmData : String
    let gradient = LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)
    
    var body: some View {
        VStack {
            //入力項目
            TextField("データ入力", text: $textData)
                .textFieldStyle(.roundedBorder)
                .padding()
            //ボタンとモーダル
            Button("入力内容確定"){
                alertOn = true
            }.alert(isPresented: $alertOn) {
                Alert(title: Text("確認"), message: Text("入力内容を確定しますか。"),
                    //OKボタン押下時
                    primaryButton: .default(Text("OK"),action: {
                    textConfirm(ConfirmData: &ConfirmData, textData: $textData)
                }),
                    //キャンセル押下時
                    secondaryButton: .cancel(Text("キャンセル"), action: {}))
            }.padding()
            
            //確定後の表示
            Text("テキストへの入力内容")
            ZStack{
                Rectangle()
                    .stroke(lineWidth: 5)
                    .fill(gradient)
                    .frame(width: 250, height: 50)
                Text(ConfirmData)
            }
            
            
        }
        .padding()
    }
}

//テキストエリアに確定した内容を代入する関数
func textConfirm(ConfirmData: inout String, textData: Binding<String>){
    ConfirmData = textData.wrappedValue
}

入力時

確認アラート

OK押下後

削除とキャンセル

次に、先ほどの入力内容を確定することでテキストを別の場所に表示する機能に、「テキストへの入力内容」の中身のデータを削除する機能も実現していきます。

削除ボタンを用意し、削除ボタンを押されたら「削除」「キャンセル」ボタンを備えたアラート画面を表示、「削除」が押された場合にテキストの内容を削除するという動きになります。

削除の確定を行うボタンは赤文字で表示することで注意喚起の意味を持たせることができます。赤く表示するためにはdestructiveをボタンに指定します。

//削除ボタンとモーダル
                Button("削除する"){
                    deleteAlertOn = true
                }.alert(isPresented: $deleteAlertOn) {
                    Alert(title: Text("確認"), message: Text("入力内容を削除しますか。"),
                          //削除ボタン押下時
                          primaryButton: .destructive(Text("削除"),action: {
                        ConfirmData = ""
                    }),
                          //キャンセル押下時
                          secondaryButton: .cancel(Text("キャンセル"), action: {}))
                }.padding()

これを先ほどのコードに追加することで入力した文字の表示と削除を行う機能を実現することができました。

テキストへのデータあり