Swift・SwiftUI

SwiftUIでActionSheet(UIAlertControllerStyle.actionSheet)を表示する方法【SwiftUI入門】

今回は UIKit で言うところの、UIAlertController.Style = .actionSheet を SwiftUI で表示するサンプルを紹介します。

SwiftUIでActionSheet(UIAlertControllerStyle.actionSheet)を表示する方法

まず、ActionSheet を表示するフラグとなる状態変数を用意します。

@State private var isShowSheet = false

Button 押下時にこのフラグを true にします。

Button(action: {
    self.isShowSheet = true
}) {
    Text("アクションシートを表示")
}

Button のアクションメソッド actionSheet を定義します。isPresented: 引数に先ほどの状態変数を紐付けます。

.actionSheet(isPresented: $isShowSheet) {}

その actionSheet アクションメソッド の中に ActionSheet ビュー を定義します。

ActionSheet(
    title: Text("タイトル"),
    message: Text("アクションシートのサンプルです。"),
    buttons: [
        .cancel(Text("キャンセル")),
        .default(Text("はい")),
        .destructive(Text("いいえ"))
    ]
)

今回は、default ボタン（青文字）と destructive ボタン（赤文字）、更に cancel ボタンを設定しています。ちなみに cancel は１つだけ設定可能です（２つ以上設定するとクラッシュします）。

最後に全体のソースコードを貼っておきます。

struct ContentView: View {
    
    @State private var isShowSheet = false
    
    var body: some View {
        Button(action: {
            self.isShowSheet = true
        }) {
            Text("アクションシートを表示")
        }
        .actionSheet(isPresented: $isShowSheet) {
            ActionSheet(
                title: Text("タイトル"),
                message: Text("アクションシートのサンプルです。"),
                buttons: [
                    .cancel(Text("キャンセル")),
                    .default(Text("はい")),
                    .destructive(Text("いいえ"))
                ]
            )
        }
    }
}

以上