先日、以下の記事で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のガイドラインで「通常タップする可能性のあるボタンは右側にあるべき、そしてキャンセルは左側にあるべき」とされているからだそうだ。