【SwiftUI】sheetでモーダル遷移する

まえがき

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

確認環境

XCode Version 15.4
MacOS Sonoma 14.4.1

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

Swiftの画面遷移には代表的なものが２つあり、そのうちの一つがモーダル遷移(表示)と呼ばれる遷移方法です。
モーダル遷移では、下から画面がスワイプアップで表示されます。
いくつか方法はあるのですが、この記事ではsheetのモディファイアを使用した例を簡単にまとめます。

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

コード例

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var isShowingModal = false

    var body: some View {
        VStack {
            Text("メイン画面です")
                .font(.title)
                .fontWeight(.bold)
                .padding()

            Button(action: {
                isShowingModal = true
            }) {
                Text("モーダルを表示")
                    .padding()
                    .background(Color.purple)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .sheet(isPresented: $isShowingModal) {
                ModalView(isShowingModal: $isShowingModal)
            }
        }
    }
}

struct ModalView: View {
    @Binding var isShowingModal: Bool

    var body: some View {
        VStack {
            Text("モーダル画面です")
                .font(.title)
                .fontWeight(.bold)
                .padding()

            Button(action: {
                isShowingModal = false
            }) {
                Text("閉じる")
                    .padding()
                    .background(Color.gray)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

メイン画面	モーダル画面

あとがき

簡単にsheetでのモーダル遷移(表示)の使用例をまとめました。
今後も捕捉事項があれば随時更新していきます。