【SwiftUI】inspectorで半画面モーダルを表示する

まえがき

この記事はSwift独学者による備忘録です。
万が一誤った記載がある場合は、コメントでご指摘いただけると幸いですm(_ _)m

確認環境

XCode Version 15.4
MacOS Sonoma 14.4.1

Swiftにおける画面遷移について

Swiftの画面遷移には代表的なものが２つあり、そのうちの1つがモーダル遷移(表示)と呼ばれる遷移方法です。
モーダル遷移では基本的に下から画面がスワイプアップで表示されます。

いくつか方法はあるのですが、この記事ではinspectorのモディファイアを使用した半画面のモーダル表示例を簡単にまとめます。

sheetで表示する全画面モーダルについてはこちらの記事に概要をまとめています。

もう一つはプッシュ遷移と呼ばれるNavigationLinkを用いた遷移方法で、画面が右から左に切り替わります。
プッシュ遷移についてはこちらの記事に簡単に概要をまとめています。

コード例

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        ZStack {
            isPresented ? Color(red: 0.4, green: 0.4, blue: 0.4, opacity: 0.6) : Color.white
            VStack {
                Text("メイン画面です")
                    .font(.title)
                    .fontWeight(.bold)
                Button("モーダルを表示") {
                    isPresented = true
                }
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .cornerRadius(10)
            }
            .inspector(isPresented: $isPresented) {
                InspectorView(dismissAction: {
                    isPresented = false
                })
            }
        }
    }
}

struct InspectorView: View {
    var dismissAction: () -> Void
    
    var body: some View {
        VStack {
            Text("モーダル画面です")
                .font(.title)
                .fontWeight(.bold)
            Button("モーダルを閉じる") {
                dismissAction()
            }
            .padding()
            .background(Color.gray)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

画面表示は以下のようになります。

※グレーアウトさせている背景をタップしてもモーダルは閉じません。
タップで閉じることができるコードがあるのか、また時間があるときに調べてみようと思います！

メイン画面	モーダル画面

あとがき

簡単にinspectorで半画面モーダルを表示する例をまとめました。
今後も捕捉事項があれば随時更新していきます。