SwiftUIのsheetとfullScreenCoverをまとめてみた

はじめに

SwiftUIで別画面を表示する方法として、sheet や fullScreenCover があります。
今回はモーダル表示に使う sheet と fullScreenCover の違いを整理します。

sheet とは

sheet は、現在の画面の上にモーダルとして別画面を表示するためのモディファイアです。

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button("Sheetを表示") {
            isPresented = true
        }
        .sheet(isPresented: $isPresented) {
            SheetView()
        }
    }
}

struct SheetView: View {
    var body: some View {
        Text("Sheetで表示した画面です")
    }
}

ボタン押下前	ボタン押下後

上記では「Sheetを表示」ボタンをタップすると、現在の画面の上に sheet が表示され、「Sheetで表示した画面です」というテキストが表示されます。

sheet は下方向にスワイプすることで閉じることができます。

fullScreenCover とは

fullScreenCover は、画面全体を覆う形で別画面を表示するためのモディファイアです。

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button("FullScreenCoverを表示") {
            isPresented = true
        }
        .fullScreenCover(isPresented: $isPresented) {
            FullScreenView()
        }
    }
}

struct FullScreenView: View {
    
    var body: some View {
        Text("FullScreenCoverで表示した画面です")
    }
}

ボタン押下前	ボタン押下後

上記では「FullScreenCoverを表示」ボタンをタップすると、fullScreenCover が画面全体を覆う形で表示され、「FullScreenCoverで表示した画面です」というテキストが表示されます。

sheet とは異なり、基本的には下方向へのスワイプで閉じる前提ではないため、画面を閉じるための処理を別途用意しておくことが必要です。

画面を閉じる方法

@Environment(\.dismiss) を使うと、sheet や fullScreenCover で表示した画面側から閉じることができます。

iOS 15から使用可能です。

struct FullScreenView: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        Button("画面を閉じる") {
            dismiss()
        }
    }
}

まとめ

今回は sheet と fullScreenCover の違いを整理しました。
sheet は補助的な画面を表示したいとき、fullScreenCover は画面全体を使って表示したいときに使うと整理することで分かりやすいかと思います。
どちらもモーダル表示に使えますが、ユーザーに与える印象が異なるため、画面の役割に合わせて使い分けるのがよいと思います。