【SwiftUI】複数の選択肢を表示させるアクションシートの使い方 | プログラマーになった「中卒」男のブログ

アクションシートでは、複数の項目の中からユーザーに選択をさせることができるUIで、SwiftUIではActionSheet構造体を使うことで簡単に実装することができる。

今回は上記のようなアクションシートを実装するコードを紹介していく。

基本手順

アクションシートの実装は以下の手順から成る。

アクションシートの表示・非表示を管理する状態変数の定義
actionSheetモディファイアに状態変数をバインド
ActionSheet構造体をactionSheetモディファイアに渡す

コード全文・解説

それでは基本的な実装コードを見ながら詳細を解説していく。

struct ContentView: View {
    @State var showingSheet = false
    @State var message = ""
    
    var body: some View {
        VStack {
            Button(action: {
                self.showingSheet = true
            }) {
                Text("アクションシートを表示する")
            }
            .actionSheet(isPresented: $showingSheet) {
                ActionSheet(title: Text("質問"),
                            message: Text("無人島に一つだけ持っていくなら？"),
                            buttons: [
                                .default(Text("水1リットル")),
                                .default(Text("米1合")),
                                .destructive(Text("ライター")) {
                                    self.message = "簡単に火をおこすことができますね！"
                                },
                                .destructive(Text("ナイフ")),
                                .destructive(Text("斧")),
                                .cancel(Text("キャンセル")),
                ])
            }
            .padding()
            Text(message)
        }
    }
}

まず、2行目がアクションシートの表示管理用の状態変数。
そして3行目で、アクションシート内のボタンが押された時にメッセージを格納するための状態変数を定義している。

8行目で、表示用ボタンが押された際にshowingSheet状態変数をtrueに設定。

12行目でactionSheetモディファイアにshowingSheet状態変数を渡し、この時変数がtrueなら後のActionSheet構造体が表示される仕組みとなっている。

ActionSheet構造体では、title、message、buttonsの三つの引数を取り、buttonsに配列型式で表示するボタンを定義する。

各ボタンにはタップされた時の処理を記述することができ、ここではサンプルとして3つ目の「ライター」ボタンにのみ処理を書いている。

このサンプルアプリを実行すると次のようになる。