ばろぐ・ほいダウン

2010年Nゲージにより鉄道事業を開始。2011年Gゲージに参入することで事業拡大。常に夢と目標と野望を持ち活動していく。

MENU

SwiftUIでのModal(.sheet())の扱い方

f:id:yotubarail:20200813104844p:plainf:id:yotubarail:20200813104902p:plain

このような画面遷移を作っていきます。

全体のコード

SwiftUIでのModalの扱い方

Modalを開く

① 最初のView(ContentView)で@Stateをつけた変数を監視させます。
上のコードではshowModalがそれにあたり、falseの状態になっています。


② ボタンが押されるとfalseだったものがtrueに変わります。

self.showModal.toggle()

これがその処理にあたり、toggle()でtrueとfalseの切り替えをします。


③ .sheet()で画面遷移させます。
カッコ内に引数isPresentedとself.$showModalを書いていきます。
$をつけないとエラーが出てしまうので注意しましょう。
また、今回の場合はselfをつけなくても大丈夫です。

Modalを閉じる

Modalで開いたViewは特にコードを書かなくても、デフォルトの機能として下スワイプで閉じられるようになっています。
しかし、様々なアプリを見ているとNavigationBarにViewを閉じるためのボタンを設けているものがほとんどです。
今回はそのボタンも作ってしまいましょう。


① 遷移先のView(NextView)で

@Environment(\.presentationMode) var presentationMode

を書きます。


② NavigationBarに設けたボタンのactionに

self.presentationMode.wrappedValue.dismiss()

を書く。

閉じる時のコードはこれで終わりです。
余談ですが、SwiftUIでNavigationBarにボタンを作るとUIKitのUIBarButtonItemを使った時より小さめに表示される気がします。
ボタンが小さいから押せていないのか、反応が悪いのかはわかりませんが実機で使うとそこそこの確率でボタンが押せません。
特にアイコンとしてSF Symbolsを使った場合は顕著です。
フォントサイズを大きくするなどして調節してあげると使いやすくなると思います。