はじめに
今回はSwiftUIで↑にあるようなアラートダイアログを出す方法についてです。
アラートダイアログを表示
ダイアログを表示するトリガーを作成
最初に表示するトリガー処理を作っていきます。
トリガーには@StateのBool型変数が必要になります。
@State private var isShowDialog: Bool = false
ボタンイベント等でアラートを表示したいタイミングでtoggle()
をします
toggle()
はBool型のtrueとfalseを入れ替えるメソッドです。
trueのタイミングでダイアログが表示されるようにしていきます。
Button {
isShowAlert.toggle()
} label: {
SomeView()
}
↑のSomeView()は好きなUIにしてください。
これでトリガー部分はできました。
ダイアログを表示する処理を作る
トリガーができたので表示処理を作っていきます。
表示は.alert
モディファイアを使います。
どこにモディファイアにあてるかですが、決まりはないです。
可読性を考えるとトリガーになっているViewに対してモディファイアするのがいいと思います。
今回でいうとButtonですね。
で、以下のように書くことでダイアログが表示されます。
.alert("タイトル", isPresented: $isShowAlert, actions: { Button(・・・) Button(・・・) ~~~~~~~省略~~~~~~~~ }, message: { Text("メッセージ") })
ポイントはisShowAlertの部分で、この変数がtrueになったタイミングで次の行が実行されるといったフローとなります。
isShowAlert
の先頭に$をつけることを忘れないようにしましょう。
これでアラートの表示が完成しました!
Alertを使うともっと直感的に実装できます。
デザイン部の実装方法としてはAlertを使った書き方もできます。
.alert(isPresented: $isShowAlert) { Alert( title: Text("タイトル"), message: Text("メッセージ"), primaryButton: .default(Text("OK"), action: { // OK押した時の処理を書く }), secondaryButton: .default(Text("Cancel")) ) }
UIKit(Storyboard)を使っていた方はこちらの方がなじみがあると思います。