先日、以下の記事でSwiftUIにおけるアラートの実装方法を紹介した。
今回はこのアラートに二つのボタンを持たせる方法を紹介する。
サンプルコード
まずは以下のサンプルコードを見てもらおう。
struct ContentView: View {
@State var showingAlert = false
var body: some View {
Button(action: {
self.showingAlert = true
}) {
Text("アラートを表示する")
}
.alert(isPresented: $showingAlert) {
Alert(title: Text("質問"),
message: Text("あなたはどっち派?"),
primaryButton: .default(Text("たけのこ")),
secondaryButton: .destructive(Text("きのこ"))
)
}
}
}
アラートの基本的な実装方法を前回の記事で詳しく紹介したので省略し、今回はボタンの部分にフォーカスして解説する。
13行目でprimaryButtonという引数があるが、こちらには左側へ表示するAlert.Button構造体を、14行目のsecondaryButtonには右側へ表示するAlert.Button構造体を指定する。
Alert.Button構造体は以下のメソッドを持っており、メソッドによってボタンの表示スタイルが異なる。
説明 | 色 | 位置 | |
default | デフォルトのスタイル | 青 | – |
destructive | 破壊的変更用のスタイル | 赤 | – |
cancel | キャンセル用のスタイル | 青(ボールド) | 左側固定 |
cancelを指定するとボタンは左側に強制表示されるが、これはAppleのガイドラインで「通常タップする可能性のあるボタンは右側にあるべき、そしてキャンセルは左側にあるべき」とされているからだそうだ。