【SwiftUI】sheetを利用したモーダルビューの表示

本記事では、sheetモディファイアを利用して、ボタンクリックなどのイベントでモーダルビューを表示する方法について解説していきます。

1. モーダルビューとは
2. モーダルビューを表示するためのボタンの用意
3. モーダルビューをsheetで作成
4. モーダルビューの設定値
5. モーダルビュー実装の全体
6. まとめ

モーダルビューとは

SwiftUIにおけるモーダルビューとは、ボタンクリックなどのイベントで現在のviewの上に重なる形で画面下から別のビューを出現させる機能です。モーダルビューは画面の下半分に表示させたり、画面いっぱいに表示させることもでき、画面外のタッチやモーダルビュー自体を下にスクロールすることで閉じることができます。

モーダルビューは、画面を遷移させる必要はないけれどユーザに示したい情報があるときなどに便利な機能になります。

表示前の画像

表示後の画像

モーダルビューを表示するためのボタンの用意

モーダルビューを表示させるためのきっかけとなるボタンとモーダルビューのON/OFFを切り替えるための変数を用意します。

モーダルビューの表示状態を管理するための変数は@StateのBool型で用意します。初期状態ではモーダルビューを閉じておきたいためfalseを代入しておきます。

@State var openModalView = false

モーダルビューを表示するためのボタンは、Button(){}を使用します。ボタンをクリックしたイベントでは、後に実装するモーダルビューを表示するために変数openModalViewをtrueに変更します。

Button("モーダルビューを表示"){
                openModalView=true
}

全体はのコードはこのようになり、モダールビュー表示前の準備段階は終了です。

struct ContentView: View {
    @State var openModalView = false
    var body: some View {
            Button("モーダルビューを表示"){
                openModalView=true
            }
    }
}

モーダルビューをsheetで作成

モーダルビューを作成するためには、.sheetモディファイアを使用します。

配置したボタンに対して.sheetモディファイアをつけることでモーダルビューを設置することができます。

sheetモディファイアの設置は、ライブラリパネルのModifiersライブラリから「sheet」をドラッグ&ドロップします。

ライブラリパネルはCommand+ Shift+LかXcode右上の+ボタンから表示することができます。

配置後のコード

Button("モーダルビュー表示"){
                openModalView=true
            }.sheet(isPresented: is Presented, content: {
                Content
})

モーダルビューの設定値

モーダルビューを表示するための、sheetモディファイアの設定値にはisPresentedとcontentがあります。

isPresentedは、モーダルビューの表示/非表示を判断するための真偽値型の変数をパラメータで渡します。今回は事前の用意した変数openModalViewを渡します。

これにより、ボタンのクリックイベントで変数openModalViewの値がtrueに変わったタイミングでモーダルビューを表示することができるようになります。

contentには、モーダルビュー上に表示するコンテンツを設定することができます。今回は緑色の背景に「モダールビュー」というテキストを表示するビューを作成するため、以下のようなコードとなります。

.sheet(isPresented: $openModalView, content: {
                ZStack{
//                    シートの背景色を指定
                    Color.green.opacity(0.9).ignoresSafeArea()
                    Text("モーダルビュー")
                }
            
            })

モーダルビュー実装の全体

ここまででご紹介したモーダビューの実装内容と表示内容の全体は以下のようになります。

また、モーダルビューを上から下にスクロールする動作でモーダルビューを閉じて元のビューを表示することができます。

コード全体

struct ContentView: View {
    @State var openModalView = false
    var body: some View {
            Button("モーダルビューを表示"){
                openModalView=true
            }.sheet(isPresented: $openModalView, content: {
                ZStack{
//                    シートの背景色を指定
                    Color.green.opacity(0.9).ignoresSafeArea()
                    Text("モーダルビュー")
                }
            
            })
    }
}

モーダルビュー表示前