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に設定しているコンテンツが表示されるというシンプルな作りです。
コメント