swiftui

【SwiftUI】モーダルを表示させる方法を解説

2種類のモーダルがありますが、使い方の流れはほぼ同じです。

2種類のモーダルについて

SwiftUIで利用できるモーダルには次の2つがあります。

両者の簡単な違い

簡単に違いを説明すると前者のsheetは一般的によく使われるモーダルで、下方向にスワイプすると消すことができます。一方後者のfullScreenCoverはその名の通りスクリーンいっぱいに表示されるのが特徴で、スワイプでは消すとこができません。

解説

どちらのモーダルでも共通のオーソドックスな実装方法を紹介します。@Stateプロパティを用意し、モダールを表示しているか否かを管理するという方法をとります。デフォルト値はfalseです。

//親View
@State var isShowingModal =  false
モーダルを表示

例えばボタンを押したときにモーダルを表示したい場合は次のように書きます。

  • Buttonのactionでtrue/falseを切り替えます
  • ButtonのModifierにsheetを適応させます
  • sheetの引数isPresentedに用意したプロパティを、クロージャにモーダルとして表示させたいViewを渡します。
var body: some View {
    Button(action: {
        self.isShowingModal.toggle()
    }){
        Text("モーダルを表示する")            
    }.sheet(isPresented: self.$isShowingScoreRecordModal) {
        Modal()
    }
}

フルスクリーンのモーダル場合は.sheetではなく.fullScreenCoverに変えてください。

モーダルを閉じる

閉じるときは先ほど用意した@Stateプロパティを切り替える必要があります。親ViewのプロパティをModalView側から切り替えることができるように、次のようにデータバインディングを行います。

//ModalView
@Binding var isShowingModal: Bool

バインディングを行う際は$をつけて値ではなく参照を渡す必要があるので注意してください。

//親View
var body: some View {
    Button(action: {
        self.isShowingModal.toggle()
    }){
        Text("モーダルを表示する")            
    }.sheet(isPresented: self.$isShowingModal) {
        Modal(isShowingModal: self.$isShowingModal)  //追記
    }
}

あとは任意のタイミングでプロパティの値を切り替えると閉じることができます。

//ModalView
Button("モーダルを閉じる") {
    self.isShowingModal.toggle()    
}

参考

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから