【SwiftUI】モーダルビューの作り方 (レシピ)

はじめに

モーダルビューというのは画面の上に別の画面を乗せるやつです。

iOSアプリで良く見かけると思いますが、

SwiftUIでやる方法についてまとめた記事になります。

参考にした書籍

モーダルビューの作り方

画面レイアウトは通常画面と同じでViewを継承して定義すればよいだけです。

import SwiftUI

struct HogeView: View {
    var body: some View {
       Text("ModalView!!")
    }
}

モーダルビューを表示(遷移)するには

使い方にかなり癖がありますので注意が必要です。

言葉で説明しても難しいのでサンプルコード見ればなんとなくわかると思います。

@State var isShowNewTodo: Bool = false

Button(action: {
   // モーダル表示するタイミングでフラグをONにする(ここ重要！！！）
    self.isShowNewTodo .toggle() // toggleはフラグを反転するメソッド
}) {

}
.sheet(isPresented: $isShowNewTodo) {
    HogeView() // 遷移先のView
}

まず遷移元で@StateというattributeをつけたBool型の変数を定義する必要があります。

次にモーダルビューに遷移するトリガーとなるViewに対してsheetモディファイアを使います

sheetのisPresentedの引数に$をつけて変数をセットします。

あとはモーダル表示(遷移)したいタイミングで変数をtrueをします。

モーダルビューを閉じるには

一応画面の上から下に向かってスワイプすると閉じることができますが、なんらかのトリガーによって画面を閉じるというのが普通ですよね。

遷移先のViewで@Environment(\.dismiss) var dismissという変数を定義します

後は閉じたいタイミングでdismiss()とすればよいです。

※別にdismissという名前にしなくてもいいです

@Environment(\.dismiss) var dismiss

Button(action: {
    dismiss()
}

おわりに

最後まで見ていただきヘペトナス！

読者登録・Twitterのフォローもお願いします。