#環境
Xcode 13.2.1
Swift 5.5.2
#実装
ボタンをタップした時にアラートを表示する場合は以下のようなコードになります。
struct ContentView: View {
@State private var isShowingAlert: Bool = false
var body: some View {
Button("アラートを表示する") {
isShowingAlert = true
}
.alert("Text", isPresented: $isShowingAlert) {
Button("Button1") {
// タップした時の処理
}
Button("Button2") {
// タップした時の処理
}
} message: {
Text("メッセージを表示する")
}
}
}
ボタンを3つ以上定義すると縦並びになります。
#解説
UIKitではアラートを表示する処理をどこかのメソッドなどで呼ぶ形でしたが、SwiftUIでは定義したアラートに表示するかどうかの条件をバインドして表示するタイミングを管理します。
最初に、アラートを表示するかどうかを判定するState
変数を定義します。
@State private var isShowingAlert: Bool = false
今回はボタンがタップされた時にアラートが表示されるようにしたいので、ボタンのタップ処理で最初に追加したisShowingAlert
をtrueにします。
Button("アラートを表示する") {
isShowingAlert = true
}
最後にalert()
modifierを定義します。
Buttonに追加していますが、アラートを表示するかは定義したBool値がtrueになった時なので、必ずButtonに追加する決まりはありません。
.alert("Title", isPresented: $isShowingAlert) {
Button("Button1") {
// タップした時の処理
}
Button("Button2") {
// タップした時の処理
}
} message: {
Text("メッセージを表示する")
}
引数
title
アラートのタイトルに使用される文字列を定義します。
isPresented
アラートを表示するかどうかを判定するBool値。アラートのアクションをタップするとこの値は自動的にfalseになります。
actions
アラートに表示するアクションボタンを定義します。アクションが存在しない場合は標準のOK
ボタンが表示されます。アクション実行後は自動的にアラートが閉じます。
message
タイトルの下に表示される文字列を定義します。messageはスタイルが設定されていないテキストのみサポートします。
###アクションボタンのスタイルを変更する
Buttonの引数role
の値を設定することでスタイルを変えることができます。
何も設定していない場合はデフォルトで青色の表示になります。
.cancel
青色のボールド表示。アクションボタンが2つ存在する場合は必ず左側に表示され、3つ以上存在する場合は必ず一番下に表示されます。
.destructive
赤色の表示。このアクションボタンが存在する場合は.cancel
アクションボタンが自動的に追加されます。
Button("Button1") {
// タップした時の処理
}
Button("Button2", role: .destructive) {
// タップした時の処理
}
スタイルを設定していないアクションボタンと.destructive
のアクションボタンを追加した場合は以下のような表示なります。