【SwiftUI】複数のアラートを表示する

複数のアラートを表示する方法について記載します。

1. 環境

Xcode : 12.2
Swift : 5

2. 動作

① 保存ボタンをタップすると１回目のアラートが表示されます。

② 確認メッセージを表示します。OKボタンを押すと次のアラートが表示されます。

③ ２つ目のアラートが表示されます。

3. コード

import SwiftUI

struct AlertItem: Identifiable {
    var id = UUID()
    var title: Text
    var message: Text?
    var dismissButton: Alert.Button?
    var primaryButton: Alert.Button?
    var secondaryButton: Alert.Button?
}

struct ContentView: View {
    
    @State private var alertItem: AlertItem?

    var body: some View {
        
        Button(action: {

            self.alertItem = AlertItem(
                title: Text("確認メッセージ"),
                message: Text("保存してもよろしいですか？"),
                primaryButton: .default(Text("OK"), action: {

                    // OKボタンが押された時の処理
                    
                    self.alertItem = AlertItem(
                        title: Text("確認メッセージ"),
                        message: Text("処理が完了しました。"),
                        dismissButton: .cancel(Text("OK")))

                })
                ,
                secondaryButton: .cancel(Text("キャンセル"), action: {
                    // キャンセルボタンが押された時の処理
                    return
                })
            )
            
        }, label: {
            Text("保存")
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(20)
                .overlay(RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/).stroke(Color.blue, lineWidth: 3))
        })
        .alert(item: $alertItem) { alertItem in
            var alertObj: Alert = Alert(
                title: alertItem.title,
                message: alertItem.message,
                dismissButton: alertItem.dismissButton
            )
            
            if( alertItem.dismissButton == nil ){
                alertObj = Alert(
                    title: alertItem.title,
                    message: alertItem.message,
                    primaryButton: alertItem.primaryButton!,
                    secondaryButton: alertItem.secondaryButton!
                )
            }
            return alertObj
        }
        .background(RoundedRectangle(cornerRadius: 10.0).fill(Color.white))
        .padding(20)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct AlertItem: Identifiable {

var id = UUID()

var title: Text

var message: Text?

var dismissButton: Alert.Button?

var primaryButton: Alert.Button?

var secondaryButton: Alert.Button?

}

struct ContentView: View {

@State private var alertItem: AlertItem?

var body: some View {

Button(action: {

self.alertItem = AlertItem(

title: Text("確認メッセージ"),

message: Text("保存してもよろしいですか？"),

primaryButton: .default(Text("OK"), action: {

// OKボタンが押された時の処理

self.alertItem = AlertItem(

title: Text("確認メッセージ"),

message: Text("処理が完了しました。"),

dismissButton: .cancel(Text("OK")))

})

secondaryButton: .cancel(Text("キャンセル"), action: {

// キャンセルボタンが押された時の処理

return

})

)

}, label: {

Text("保存")

.frame(minWidth: 0, maxWidth: .infinity)

.padding(20)

.overlay(RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/).stroke(Color.blue, lineWidth: 3))

})

.alert(item: $alertItem) { alertItem in

var alertObj: Alert = Alert(

title: alertItem.title,

message: alertItem.message,

dismissButton: alertItem.dismissButton

)

if( alertItem.dismissButton == nil ){

alertObj = Alert(

title: alertItem.title,

message: alertItem.message,

primaryButton: alertItem.primaryButton!,

secondaryButton: alertItem.secondaryButton!

)

}

return alertObj

}

.background(RoundedRectangle(cornerRadius: 10.0).fill(Color.white))

.padding(20)

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

4. ポイント

① Alert用の構造体を定義

struct AlertItem: Identifiable {
    var id = UUID()
    var title: Text
    var message: Text?
    var dismissButton: Alert.Button?
    var primaryButton: Alert.Button?
    var secondaryButton: Alert.Button?
}

struct AlertItem: Identifiable {

var id = UUID()

var title: Text

var message: Text?

var dismissButton: Alert.Button?

var primaryButton: Alert.Button?

var secondaryButton: Alert.Button?

}

② Alert構造体の変数を @State で定義

変数に変更があった際にアラートが表示されるようにします。

@State private var alertItem: AlertItem?

1	@State private var alertItem: AlertItem?

③ アラートを表示する処理を定義

今回は、シングルボタンとダブルボタンのアラートを表示したかったので、Alert構造体のdismissButtonプロパティに値が設定されているかで、表示するアラートを判定しています。

.alert(item: $alertItem) { alertItem in
    var alertObj: Alert = Alert(
        title: alertItem.title,
        message: alertItem.message,
        dismissButton: alertItem.dismissButton
    )
    
    if( alertItem.dismissButton == nil ){
        alertObj = Alert(
            title: alertItem.title,
            message: alertItem.message,
            primaryButton: alertItem.primaryButton!,
            secondaryButton: alertItem.secondaryButton!
        )
    }
    return alertObj
}

.alert(item: $alertItem) { alertItem in

var alertObj: Alert = Alert(

title: alertItem.title,

message: alertItem.message,

dismissButton: alertItem.dismissButton

)

if( alertItem.dismissButton == nil ){

alertObj = Alert(

title: alertItem.title,

message: alertItem.message,

primaryButton: alertItem.primaryButton!,

secondaryButton: alertItem.secondaryButton!

)

}

return alertObj

}

あとは、次のようにアラートを表示したい任意の場所でAlert構造体を使用して、alertItem変数に代入するだけでアラートが表示されます。

self.alertItem = AlertItem(・・・)

1	self.alertItem = AlertItem(・・・)