SwiftUIでモーダル表示-sheetの使い方

2021.08.02

SwiftUIで画面をモーダル表示したい時、sheet(isPresented:onDismiss:content:) を使用することでとても簡単に実装できてしまいます。

モーダル画面の表示

早速モーダル画面の表示方法を確認しましょう。

struct ContentView: View {
    @State var isShownModalView = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isShownModalView = true
            }, label: {
                Text("モーダル画面表示")
            })
            .sheet(isPresented: $isShownModalView,
                   onDismiss: {
                    print("閉じた")
                   },
                   content: {
                    ModalView().frame(height: 200)
            })
        }
    }
}

struct ModalView: View {
    @Environment(\.presentationMode) var presentation
    
    var body: some View {
        Button(action: {
            self.presentation.wrappedValue.dismiss()
        }, label: {
            Text("Close")
        })
    }
}

ContentViewからModalViewを呼び出して表示するコードです。

@Stateや@Environmentについてわからない場合は僕の過去の記事で説明しているので、読んでみてください。
@State, @ObservedObject, @EnvironmentObject の使い分け – SwiftUI
@EnvironmentでViewの環境値を読み取ろう-SwiftUI

ContentView内のButtonに対してsheetというモディファイアをつけることでModalViewをモーダル表示しています。

sheetについて

このsheetとは以下のようなインスタンスメソッドです。

func sheet<Content>(isPresented: Binding<Bool>, onDismiss: (() -> Void)? = nil, content: @escaping () -> Content) -> some View where Content : View

パラメータを説明していきましょう。

isPresented
この後に説明するcontentクロージャに渡すコンテンツを表示するかしないかを判断するBool値。trueを渡せば表示され、falseを渡せば表示されません。

onDismiss
sheetメソッドによって表示されたコンテンツが非表示になるときに実行される処理。

content
表示するコンテンツ

特に難しいことはないですね。isPresentedをtrueにすればcontentに設定しているコンテンツが表示されるというシンプルな作りです。

コメント